JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<link rel="stylesheet" href="http://www.fuelcdn.com/fuelux-imh/2.6.1/css/fuelux.min.css">
<script src="http://www.fuelcdn.com/fuelux-imh/2.6.1/loader.js"></script>
<div class="fuelux">
<div id="MyTree" class="tree">
	<div class = "tree-folder" style="display:none;">
		<div class="tree-folder-header">
			<i class="icon-chevron-right"></i>
            <i class="icon-folder-close"></i>
			<div class="tree-folder-name"></div>
		</div>
		<div class="tree-folder-content"></div>
		<div class="tree-loader" style="display:none"></div>
	</div>
	<div class="tree-item" style="display:none;">
		<i class="tree-dot"></i>
		<div class="tree-item-name"></div>
	</div>
</div>
</div>

CSS

.fuelux .tree i.icon-chevron-right, .fuelux .tree i.icon-chevron-down {
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
}

.icon-folder-close, .tree-dot, .icon-ok, .icon-folder-open{
    margin-left: 15px;
}

.fuelux .tree .tree-folder .tree-folder-header .tree-folder-name,
.fuelux .tree .tree-item .tree-item-name {
    padding-left: 40px;
}

.selected {
    background-color: #b9dff1;
}

.sub-selected {
    background-color: #e9e9e9;
}

JavaScript

var dataSource = {
    data: function(options, callback){
        if(!!options.name && options.name.match(/Acquire|Onboard|Engage|Retain/)){
              callback({ data: [
                { name: 'Winter 2014', type: 'folder' },
                { name: 'Spring 2014', type: 'folder' },
                { name: 'Summer 2014', type: 'folder' },
                { name: 'Fall 2014', type: 'folder' }
             ]});             
        }else if(!!options.name && options.name.match(/Winter 2014|Spring 2014|Summer 2014|Fall 2014/)){
              callback({ data: [
                { name: 'Mountain Vacations', type: 'item' },
                { name: 'Beach Vacations', type: 'item' },
                { name: 'Desert Vacations', type: 'item' },
                { name: 'Ocean Vacations', type: 'item' }
             ]});             
        }else{
             callback({ data: [
                { name: 'Acquire', type: 'folder' },
                { name: 'Onboard', type: 'folder' },
                { name: 'Engage', type: 'folder' },
                { name: 'Retain', type: 'folder' }
             ]});
        }
    },
    columns: function(){
        return [];
    },
    delay: 0
}

$('#MyTree').tree({ /*multiSelect: true*/ dataSource: dataSource });

$('body').on('click', '.tree-item', $.proxy( function(ev) { 
    var $p = $(ev.currentTarget);
    var $gp = $p.parent().prev();
    var $ggp = $gp.parent().parent().prev();
    $('body').find('.sub-selected').removeClass('sub-selected');
    $gp.removeClass('selected').addClass('sub-selected');


} ,this));

$('body').on('click', '.tree-folder-header', $.proxy( function(ev) {

    var $p = $(ev.currentTarget);
    var $f = $($p.find('i')[1]);
    var $t = $($p.find('i')[0]);
    var $gp = $p.parent().parent().prev();
    var $ggp = $gp.parent().parent().prev();
    
    if($f.hasClass('icon-folder-open')){
        $p.addClass('selected');
        $gp.removeClass('selected').addClass('sub-selected');
       ...