Cacher is the code snippet organizer for pro developers

.nav-tree .list-group-item {
    padding: 0;
    position: relative;
}
.nav-tree .list-group-item a {
    margin: 0;
    padding-left: 3px;
    height: 28px;
    line-height: 28px;
}
.nav-tree .list-group-item.active > a {
    padding-left: 0;
}
.nav-tree .list-group-item .glyphicon {
    padding-left: 18px;
}
.nav-tree .list-group-item .glyphicon:before {
    position: absolute;
    top: 7px;
    margin-left: -18px;
    color: #666666;
}
.nav-tree .list-group-item > .caret {
    position: absolute;
    height: 28px;
    width: 16px;
    padding: 0;
    border: none;
    cursor: pointer;
}
.nav-tree .list-group-item > .caret:after {
    display: none;
}
.nav-tree .list-group-item.has-children > .caret:after {
    display: block;
    content: url(http://ssl.gstatic.com/ui/v1/zippy/arrow_right.png);
    left: 6px;
    top: 3px;
    position: absolute;
}
.nav-tree .list-group-item > .list-group {
    display: none;
}
.nav-tree .open > .list-group {
    display: block;
}
.nav-tree .list-group-item.has-children.open > .caret:after {
    content: url(http://ssl.gstatic.com/ui/v1/zippy/arrow_down.png);
    left: 5px;
    top: 2px;
}
.nav-tree .list-group-item.has-children > .caret:hover {
    background-color: #eeeeee;
}

/** nav-tree offset fixes (should be done with JavaScript) **/
.nav-tree .list-group {
  margin-bottom: 0;
}
.list-group .list-group-item > .caret {
  margin-left: 10px;
}
.list-group a > span,
.list-group .list-group .list-group-item > .caret {
  margin-left: 25px;
}
.list-group .list-group a > span,
.list-group .list-group .list-group .list-group-item > .caret {
  margin-left: 40px;
}
.list-group .list-group .list-group a > span,
.list-group .list-group .list-group .list-group .list-group-item > .caret {
  margin-left: 55px;
}
.list-group .list-group .list-group .list-group a > span,
.list-group .list-group .list-group .list-group .list-group .list-group-item > .caret {
  margin-left: 70px;
}
.list-group .list-group .list-group .list-group .list-group a > span,
.list-group .list-group .list-group .list-group .list-group .list-group .list-group-item > .caret {
  margin-left: 85px;
}
</style>

<ul class="nav-tree list-group">
    <li class="list-group-item has-children open">
        <b class="caret"></b>
        <a href="#"><span>Account</span></a>
        <ul class="list-group">
            <li class="list-group-item has-children open">
                <b class="caret"></b>
                <a href="#"><span class="glyphicon glyphicon-folder-open">Tuning</span></a>
                <ul class="list-group">
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Books</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Information</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Projects</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Software</span></a>
                    </li>
                </ul>
            </li>
            <li class="list-group-item has-children">
                <b class="caret"></b>
                <a href="#"><span class="glyphicon glyphicon-folder-open">Test node</span></a>
                <ul class="list-group">
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Books</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Information</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Projects</span></a>
                    </li>
                    <li class="list-group-item">
                        <b class="caret"></b>
                        <a href="#"><span class="glyphicon glyphicon-folder-close">Software</span></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

// find all nav-tree's
$('.nav-tree').each(function () {

    // scope the tree
    var tree = $(this),
        groups = tree.find('.list-group'),
        items = tree.find('.list-group-item');

    // each list group item
    items.each(function(i, item){

        // toggle open class on caret mouse click
        $(item).children('b.caret').on('click', function (event) {
            $(item).toggleClass('open');
        });

        // toggle active class on item mouse click
        $(item).children('a').on('click', function (event) {

            // remove previous active item
            items.removeClass('active');

            // add active class to item
            $(item).addClass('active');
        });

        // jquery-ui extra (drag'n'drop)

/*      groups.sortable({
            connectWith: groups,
            revert: 50,
            cursorAt: { top: 1, left: 1 },
            helper: function (event, original) {
                return $('<div/>', { 'class': 'tree-item-drag' }).text($(original).children('a').children('span').text()).css({
                    fontWeight: 'bold',
                    padding: '4px 10px',
                    backgroundColor: '#ffffff',
                    border: '1px solid #d5d5d5',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
					height: 28,
                    width: 'auto'
                });
            }
        });
        */
    });
});