JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="container">
<ul class="list-base list-customers" id="customers">
    <li class="list-head">
        <div class="item-head">
            <!--<span class="btn btn-expand"></span>-->
            <span>Client Name</span>
        </div>
    </li>
    <li>
        <div class="item-head">
            <span class="btn btn-expand"></span>
            <span class="client-name">Client Name Here</span>
            <a href="#" class="btn right">Edit</a>
        </div>
        <div class="item-content">
            <address>
                <strong>Business:</strong><br>
                John Smith<br>
                (XXX) XXX-XXXX<br>
                [email protected]
            </address>
            <address>
                <strong>Technical:</strong><br>
                John Smith<br>
                (XXX) XXX-XXXX<br>
                [email protected]
            </address>
            <address>
                <strong>Customer Support:</strong><br>
                John Smith<br>
                (XXX) XXX-XXXX<br>
                [email protected]
            </address>
            <address>
                <strong>Servers:</strong><br>
                XXX.XXX.XXX.XXX<br>
                XXX.XXX.XXX.XXX<br>
                XXX.XXX.XXX.XXX
            </address>
        </div>
    </li>
    <li>
        <div class="item-head">
            <span class="btn btn-expand"></span>
            <span class="client-name">Client Name Here</span>
            <a href="#" class="btn right">Edit</a>
        </div>
        <div class="item-content">
            <address>
                <strong>Business:</strong><br>
                John Smith<br>
                (XXX) XXX-XXXX<br>
                [email protected]
            </address>
            <address>
                <strong>Technical:</strong><br>
                John Smith<br>
                (XXX) XXX-XXXX<br>
                [email protected]
            </address>
            <address>
          ...

CSS

body { font: 14px/20px Helvetica, sans-serif; background: -webkit-radial-gradient(rgba(127, 127, 127, 0), rgba(127, 127, 127, 0.1) 35%, rgba(0, 0, 0, 0.2)); }
strong { font-weight: bold; }
.list-base { background: #FFF; border: 1px solid #999; width: 100%; }
.list-base li { padding: 10px; line-height: 20px; }
.list-base .list-head, .list-customers li.list-head.active .item-head:hover  { background: #999; color: #FFF; }
.list-base li:nth-child(2n+3) { background: #F9F9F9; }
.btn-expand { width: 0; height: 20px; display: block; text-decoration: none; float: left; padding-right: 20px; font-weight: bold; }
.btn-expand:after { content: "+"; width: 10px; display: inline-block; text-align: center; }
.btn.right { float: right; }

.list-customers li.list-head .item-head { cursor: default; }
.list-customers li .item-head { cursor: pointer; margin: -10px; padding: 10px; }
.list-customers .item-content { height: 0; margin: 0 0 0 20px; overflow: hidden; cursor: default; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; }
.list-customers li.active .btn-expand:after { content: "-"; }
.list-customers li.active .item-head span.client-name { font-weight: bold; }
.list-customers li.active .item-content { height: 80px; margin: 30px 0 10px 20px; }
.list-customers li.active .item-head:hover { background: #EEE; }
.list-customers .item-content address { width: 25%; float: left; }

JavaScript

$(".list-base li .item-head").click(function() {
    if($(this).parent().hasClass("list-head")) { return; }
    $(this).parent().toggleClass("active");
});
/*$(".list-base li.list-head .btn-expand").click(function() {
     $(this).closest("ul").children().toggleClass("active");
});*/