JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<div><span class="collapsedNodeTitle node">CC Division</span>
</div>
<div><span class="collapsedNodeTitle node">Wealth Management Divison</span>
</div>
<div><span class="collapsedNodeTitle node">TT Division</span>
</div>
</div>
<br/>
<div id="info" >
    <span>Name: </span><span data-bind="text: name"></span>
</div>

CSS

.collapsedNodeTitle {
    color: blue;
}
.expandedNodeTitle {
    color: black;
    background: gray;
}
.selectedNode {
    color: white;
    background: darkBlue;
}

JavaScript

(function ($) {
    $(function () {
        $('#menu').on('click', '.node', function () {
            var sp = $(this);
            var node = sp.parent();
            cleanUp(node, sp);
            console.log($(this).attr('id'));
            node.addClass('expanded');
            sp.addClass('expandedNodeTitle');
            sp.addClass('selectedNode');
            sp = null;
            node.append('<div class=" collapsed offset1"><span class="collapsedNodeTitle node" id="d">Amex Blue Unit</span></div><div class="collapsed offset1"><span class="node collapsedNodeTitle" id="e">Gold Unit</span></div><div class=" collapsed offset1"><span class="node collapsedNodeTitle" id="f">Platinum Unit</span></div><div class="collapsed offset1"><span class="node collapsedNodeTitle" id="g">Silver Unit</span></div>');
        }); //click Handler

        var cleanUp = function (node, title) {
            node.removeClass('collapsed');
            title.removeClass('collapsedNodeTitle');
            $('.selectedNode').removeClass('selectedNode');
        };

        var appendSubNodes = function (node) {};
    });
})(jQuery);

function hierarchyViewModel() {
    var self = this; 
    self.location = ko.observable();
    self.name = ko.observable();
    self.name('Test'); 
}

ko.applyBindings(new hierarchyViewModel());