JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="control-group fltlft">
    <div class="controls">
        <div class="input-append">
            <input class="span2" id="treefilter" name="treefilter" size="16" type="text" placeholder="filter">
        </div>
    </div>
</div>
<div class="btn-group fltlft">
    <a class="btn dropdown-toggle noradiuslft" data-toggle="dropdown" href="#">
        Actions <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a id="treeCheckAll" href="#"><i class="icon-ok-sign"></i> Check all</a></li>
        <li><a id="treeUncheckAll" href="#"><i class="icon-remove-sign"></i> Uncheck all</a></li>
        <li class="divider"></li>
        <li><a class="togglecomplete" href="#"><i class="icon-plus-sign"></i> Expand all</a></li>
        <li><a class="togglecomplete" href="#"><i class="icon-minus-sign"></i> Collapse all</a></li>
    </ul>
</div>
<div style="clear:both;"></div>

<hr />

<ul class="treecheckbox">
    <li class="expandable"><input type="checkbox" name="campo[]" id="node1" value="module1"><label for="node1">Node 1</label>
        <ul>
            <li class="expandable"><input type="checkbox" name="campo[]" id="node11" value="module2"><label for="node11">Node 1.1</label>
                <ul>
                    <li><input type="checkbox" name="campo[]" id="node111" value="module3"><label for="node111">Node 1.1.1</label></li>
                    <li><input type="checkbox" name="campo[]" id="node112" value="module3"><label for="node112">Node 1.1.2</label></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li class="expandable"><input type="checkbox" name="campo[]" id="node12" value="module4"><label for="node12">Node 1.2</label>
                <ul>
                    <li><input type="checkbox" name="campo[]" id="node121" value="module5" checked><label for="node121">Node 1.2.1</label></li>
                   ...

CSS

body {
    font-family: verdana, arial;
    font-size: 0.8em;
    margin: 50px;
}
div.fltlft{float:left;}
.btn-group > a.btn.noradiuslft{-webkit-border-bottom-left-radius: 0;border-bottom-left-radius: 0;-webkit-border-top-left-radius: 0;border-top-left-radius: 0;-moz-border-radius-bottomleft: 0;-moz-border-radius-topleft: 0;}
ul.treecheckbox, ul.treecheckbox li{margin:0 5px;padding:0 5px;}
ul.treecheckbox ul.dropdown-menu li{margin:0;padding:0;}
ul.treecheckbox li{list-style:none;clear:both;}
ul.treecheckbox li label{margin-left:5px;float:left;cursor:pointer;}
ul.treecheckbox li a.litoggle{float:left;margin-top:2px;margin-left:-16px;width:16px;height:16px;display:block;background:url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png) -24px -96px no-repeat;}
ul.treecheckbox li input{margin-left:3px;margin-right:3px;float:left;}
ul.treecheckbox li:hover > div.pull-left div.btn-group{display:block !important;}

.icon-checkbox-unchecked {
background: url(http://www.nonumber.nl/images/checkbox.png) no-repeat 0 0;
}

JavaScript

jQuery(function($){
    var toggleAll = true;
    var checkmenu = '<div class="pull-left"><div class="btn-group" style="margin-left: 6px; display:none;"><a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-mini"><span class="caret"></span></a><ul class="nav nav-list dropdown-menu"><li class="nav-header">Sub-items:</li><li class="divider"></li><li class=""><a class="checkall" href="javascript:;"><i class="icon-check"></i> Select</a></li><li><a class="uncheckall" href="javascript:;"><i class="icon-checkbox-unchecked"></i> Deselect</a></li><li class="divider"></li><li><a class="expandall" href="javascript:;"><i class="icon-plus-sign"></i> Expand</a></li><li><a class="collapseall" href="javascript:;"><i class="icon-minus-sign"></i> Collapse</a></li></ul></div></div>';

    // Append drop down menu in nodes
    $("li.expandable").each(function(){
        $li = $(this);
        if( $li.find("ul").length > 1 || $li.find("ul:first").children("li").length > 1 ) {
            $li.find("label:first").after(checkmenu);
        }
    });

    // Append Expand/Collapse in nodes
    $("li.expandable").prepend('<a class="litoggle" href="javascript:;" />');

    // Takes care of the Expand/Collapse of a node
    $("li.expandable a.litoggle").click(function(){
        $li = $(this);
        $livisible = $li.parent().find("ul").is(":visible");

        // Take care of parent UL
        $li.css("background-position", ( $livisible ? '0 -96px' : '-24px -96px')).parent().find("ul").toggle();

        // Take care of children image folders
        $li.parent().find("ul li.expandable a").css("background-position", ( $livisible ? '0 -96px' : '-24px -96px'));

        // Take care of children ULs
        if ($livisible) {
            $li.parent()
            .find("ul")
            .hide();
        }else{
            $li.parent()
            .find("ul")
            .show();
        }
    });

    // Takes care of the filtering
    $('#treefilter').keyup(function()
    {
      ...