Accordion sub-levels

Accordion sub-levels

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome-more/2.0/css/font-awesome.css">
<link rel="stylesheet" href="http://mainandwilliams.net/css/kickstrap.css">
<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked">
    <li>
        <a href="#">Page 1</a> 
    </li>
    <li>
        <a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed">
            <i class="icon-chevron-up pull-right"></i>Page 2 </a>
          <ul id="subnav01" class="nav nav-list collapse">
            <li><a href="#1">Page 2.1</a></li>
            <li><a href="#" data-toggle='collapse' data-target='#subnav01.1', data-parent='#sidenav01.1' class="accordion-toggle collapsed">
                <i class="icon-chevron-up pull-right"></i>Page 2.2</a>
                <ul id="subnav01.1" class="nav nav-list collapse">
                    <li><a href="#1">Sub-level 1</a></li>
                    <li><a href="#2">Sub-level 2</a></li>
                </ul>
            </li>
            <li><a href="#6">Page 2.3</a></li>
          </ul>
    </li>
    <li>
        <a href="#page">Page 3</a> 
    </li>
</ul>

JavaScript

$(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        $(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7


        $(target).collapse('toggle');
});