tree plugin

by Victor

HTML

<h2><span class="fa fa-tag"></span> Marks</h2>
	<div class="markList">
		<div class="fileList">
			<h2><span class="fa fa-folder-open"></span> Project Files</h2>
			<!-- start mock tree list -->
			<ul class="topLevel">
				<!-- starts list item -->
				<li>
					<!-- give it a main title -->
					<span class="title"><span class="fa fa-caret-down"></span> Title
					<!-- print the active count -->
					<span class="activeCount"></span>
					<!-- button to de-select all in group FLOATED RIGHT -->
					<a href="#" class="bttn bttn-delete selectNone fr">Unselect&nbsp;All</a>
					<!-- button to select all in group FLOATED RIGHT -->
					<a href="#" class="bttn selectAll fr">Select All</a>
				</span>
				<!-- this is the dropdown part of the list -->
				<ul> <!-- the check gets changed on click, as well as the checkbox getting checked.
					Kyle you will need to make those inputs work!-->
					<li><span class="fa fa-square-o"></span>Inner Option <input type="checkbox" /></li>
					<li><span class="fa fa-square-o"></span>Inner Option <input type="checkbox" /></li>
					<li><span class="fa fa-square-o"></span>Inner Option <input type="checkbox" /></li>
					<li><span class="fa fa-square-o"></span>Inner Option <input type="checkbox" /></li>
					<li><span class="fa fa-square-o"></span>Inner Option <input type="checkbox" /></li>
				</ul>
			</li>
							<li>
					<!-- give it a main title -->
					<span class="title"><span class="fa fa-caret-down"></span> Title
					<!-- print the active count -->
					<span class="activeCount"></span>
					<!-- button to de-select all in group FLOATED RIGHT -->
					<a href="#" class="bttn bttn-delete selectNone fr">Unselect&nbsp;All</a>
					<!-- button to select all in group FLOATED RIGHT -->
					<a href="#" class="bttn selectAll fr">Select All</a>
				</span>
				<!-- this is the dropdown part of the list -->
				<ul> <!-- the check gets changed on click, as well as the checkbox getting checked.
					Kyle you will need to make...

SCSS

$main:#2F7ED8 ;
$mainDark:#2565AA;
.center {
    margin:0;
}

.fileList, .loadedRecords {
    width:50%;
   
    position:absolute;
    top:0;
    border:1px solid #999;
    border-top:none;
    height:100%;padding:0;
    box-shadow:inset 0 0 5px white;
    h2 {
        margin:0;
    }
}

.loadedRecords {
    right:0;
    padding:0;
    border-left:none;
}

.upRecord {
 background:#e3e3e3;
    border:none;
    width:100%;
    height:auto;
    margin: 0;
    padding:3%;
    display:block;
    background:white;
    color:#333;
    font-weight:bold;
    border-top: 1px solid #e3e3e3;
    border-bottom:1px solid #999;
    position:relative;
    @extend .cf;
    a {
        color:#333;
        text-decoration: none;
        display:inline-block;
        position: absolute;
        right: 0;
        border-radius: 0;
        height:100%;
        width:auto;
        top:0;
        padding: 0 20px;
        font-size:13px;
        &:hover {
            background: #c0392b;
            color:white;

        }
        span {
            position:relative;
            top: 1px;
            margin-right: 5px;
        }
    }
}
table tr {
    border:none;
}
.responsiveTable tbody tr td {
    box-shadow:none !important;

}
tr {
    border-bottom:1px solid #999;
}

//  tree style

ul.topLevel {
    padding:5px;
    margin-top:0px;
    border:none;
    background:none;
}
.topLevel li {
    list-style-type:none;
    padding:2px;
    border-bottom:1px solid #e3e3e3;
}
.topLevel li span.title {
    display:inline-block;
    width:100%;
    padding:4px;
    font-size:20px;
    cursor:pointer;
    &:hover {
        color:#2F7ED8;
        .fa.fa-caret-down {
            /* Safari */
            -webkit-transform: rotate(-90deg) !important;
            /* Firefox */
            -moz-transform: rotate(-90deg) !important;
            /* IE */
            -ms-transform: rotate(-90deg) !important;
            /* Opera */
            -o-transform: rotate(-90deg) !important;
            /*...

JavaScript

$(document).ready(function () {


    // *************************
    // CHART HEIGHTS
    //set winheight for use
    var winHeight = $(window).height(); // this will almost surely fail on ie, double check
    var fullChart = (winHeight - 220);
    var halfChart = (winHeight - 255) * .5;
    //set chart heights on screen
    $(' .doubleChart').height((winHeight - 75));
    $('.simpleChart').height((winHeight - 42));

    $('.simpleChart .chart').height(fullChart);
    $('.doubleChart .chart').height(halfChart);
    $('#projectChartContainer').css("margin-top", "180px");


$('body').height(winHeight);
    // ****************************************
    // SCROLLING 


    // $('#pageContent').perfectScrollbar();



    // ********************************
    // TABS

    //hide them
    $('.tab ').not('.currentTab').hide();
    //on click 
    $('.subNav li a ').click(function () {
        //remove from the current
        $(".current").removeClass('current');
        //add it to the new one we clicked
        $(this).addClass("current");

        var newTab = $(this).data('tab');
        var newTabClass = ("." + newTab);

        //if its not already showing, show this newly active tab
        if ($(newTabClass).hasClass('currentTab') == false) {
            //hide the showing 
            $("div.currentTab").fadeOut(500).removeClass('currentTab');
            //show the new one
            $(newTabClass).fadeIn(500).addClass('currentTab');

            if ($('.currentTab').hasClass('marks')) {
                $('.upRecord').each(function () {
                    var parentHeight = $(this).find('a').height();
                    $(this).find('a').css("line-height", parentHeight + "px");
                });

            };
        };

        return false;
    });

    //  ******************************************
    //ALARMS
    //Position alarm hud
    $('.alarmHud').css("top", ((winHeight / 2) - 175));

    //Set the list heights so its fullscreen and...