Multilayer checkbox list

by Victor

HTML

<ul class="topLevel">
        <li>
        <span class="title"><span class="fontawesome-caret-down"></span> Title
            <span class="activeCount"></span>
            <a href="#" class="bttn">Select All</a>
            <a href="#" class="bttn bttn-delete">Unselect All</a>
        </span>
        
        <ul>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
        </ul>
    </li>
     <li>
        <span class="title"><span class="fontawesome-caret-down"></span> Title
            <span class="activeCount"></span>
            <a href="#" class="bttn">Select All</a>
            <a href="#" class="bttn bttn-delete">Unselect All</a>
        </span>
        
        <ul>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
        </ul>
    </li>
     <li>
        <span class="title"><span class="fontawesome-caret-down"></span> Title
            <span class="activeCount"></span>
            <a href="#" class="bttn">Select All</a>
            <a href="#" class="bttn bttn-delete">Unselect All</a>
        </span>
        
        <ul>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span class="fontawesome-check-empty"></span>Inner Option</li>
            <li><span...

SCSS

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}
ul.topLevel {
    padding:5px;
    margin-top:0px;
}
.topLevel li {
    list-style-type:none;
    padding:2px;
}
.topLevel li span.title {
    display:inline-block;
    width:100%;
    padding:4px;
    font-size:20px;
    &:hover {
            color:#2F7ED8;
            .fontawesome-angle-down {
                /* Safari */
                -webkit-transform: rotate(0deg);
                /* Firefox */
                -moz-transform: rotate(0deg);
                /* IE */
                -ms-transform: rotate(0deg);
                /* Opera */
                -o-transform: rotate(0deg);
                /* Internet Explorer */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
            }
        }
        cursor:pointer;
}
ul.topLevel li  ul{ 
    border-radius:4px;
    overflow:hidden;
    padding:0;
    margin-left: 15px;
    background:#F2F2F2;
    border:1px solid #e3e3e3;
    li{cursor:pointer;padding:5px;}
    li:hover {
            color:#2F7ED8;
        }
}
.topLevel li {
    position:relative;
}
.activeProject {
    background:#2F7ED8;
    color:white;
    
    &:hover {
            background:#2669AF;
            color:white;
        }
}

.activeCount {
    display:inline;
    width:auto;
    font-size:80%;
    border:1px solid #2669AF;
    padding:0px 10px;
    border-radius:4px;
}
.activeCount:empty {
    border:none;
    padding:0;
}
.fontawesome-check-empty, .fontawesome-check {
    display:inline;
    margin-right:4px;
}
span.fontawesome-caret-down {
    position:inline-block !important;
    width:10px;
    text-align: center;
    float:left;
    padding:0;
    margin-right:5px;
    
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
  ...

JavaScript

// these dont matter much
$('.topLevel').children('li').click(function(event){
    event.stopPropagation();
});

$('.topLevel li ul').children('li').click(function(event){
    event.stopPropagation();
});

// init hide of sub-list
$('li ul').hide();

// when you click the title/trigger
$('.topLevel > li > span').click(function(e){
        e.stopPropagation();
    if ($(this).hasClass('openList') == false) {
        $('.openList').removeClass('openList').siblings('ul').hide(200);
        $(this).addClass('openList');
        $(this).siblings('ul').slideDown(400);
    } else {
        $(this).siblings('ul').slideUp(400);
        $(this).removeClass('openList');
    };
});


// selecting a project to be active
$('li ul li').click(function(){  
    // if this isnt active make it active and add styling where needed
    if ($(this).hasClass('activeProject') == false){
        
        $(this).addClass('activeProject');
        
        //indicator for active records
        //find if there are other actives
        //var activeCount = $(this).parent().find('.activeProject').length();
        // $(this).parent().parent().find('activeCount').html(activeCount);
        
        // if ($('.activeCount').is(':visible') == true) {
        //     var currentCount = $('.activeCount').text();
        //      var newCount = currentCount + 1 ;
        //      $('.activeCount').html(newCount);
        //} else {
        //
        //}
        
        //font reference
        $(this).find('span').removeClass('fontawesome-check-empty').addClass('fontawesome-check');
        $('.activeProject').parent().siblings('span').css("color","#2F7ED8");
        
    } else { 
        
        // or else make it inactive
        $(this).removeClass('activeProject');
        $(this).find('span').removeClass('fontawesome-check').addClass('fontawesome-check-empty');
        
        // and check if any others in that sublist are active.
        if ($(this).siblings().hasClass('activeProject') ===...