JSFiddle - React, Tailwind, and code Playground

by peteorpeter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="box">
    <label>Big System</label>
    <div class="box">
        <label>Web Tier</label>
        <div class="box">
            <label>Admin UI</label>
        </div>
        <div class="box">
            <label>CSR Web UI</label>
        </div>
        
    </div>
    <div class="box">
        <label>Services</label>
        <div class="box">
            <label>WS API</label>
        </div>
        <div class="box">
            <label>Claims History</label>
        </div>
        <div class="box">
            <label>Access Control</label>
        </div>
        <div class="box">
            <label>Claims Adjudication</label>
        </div>
    </div>
    <div class="box">
        <label>Data Tier</label>
        <div class="box">
            <label>Claims</label>
        </div>
        <div class="box">
            <label>Tx History</label>
        </div>
        <div class="box">
            <label>Analytics</label>
            <div class="box">
                <label>Analytics Store</label>
            </div>
            <div class="box">
                <label>Calculations</label>
            </div>
            <div class="box">
                <label>Rules</label>
            </div>
        </div>
    </div>
</div>

CSS

.box {
    /*float:left;*/
    min-width: 100px;
    max-width: 600px;
    padding: 10px;
    border: 1px solid #888;
    border-radius: 4px;
    margin: 10px;
    position: relative;
    min-height: 40px;
    
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
    
    -webkit-box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
    -moz-box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
    box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, .5);
}
.box.group { clear: both }

label { 
    diplay: block;
    width: 100%;
    /*float: left;*/
}

a.control {
    position: absolute;
    right: 6px;
    top: 4px; 
    cursor: pointer;
    font: Courier, monospace;
}

JavaScript

$(function() {
    var $boxes = $('.box');

    $boxes.each(function() {

        if ($(this).find('.box').length) {

            $(this).addClass('group');

            var $control = $('<a class="control open">[+]</a>');

            $control.click(function() {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open').text('[+]').closest('.box').find(' > .box').hide('fast');
                } else {
                    $(this).addClass('open').text('[-]').closest('.box').find(' > .box').show('fast');
                }
            });

            $(this).append($control);

            $control.click(); // start closed
        }
    });
});