Extend Bootstrap Collapse API

Collapse functionality that doesn't function as an accordion (won't collapse other items when expanding the clicks one).

by davidpauljunior

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="nav-sidebar">
    <ul>
        <li>
            <a href="#" class="tip" data-toggle="tooltip" data-placement="right" title="View snippets of content from around the site, personalised for you."><span class="c-icon c-icon-home c-icon-md" aria-hidden="true"></span>My Dashboard</a>
        </li>
        <li>
            <a href="#" class="tip" data-toggle="tooltip" data-placement="right" title="View snippets of content from around the site, personalised for you."><span class="c-icon c-icon-device-support c-icon-md" aria-hidden="true"></span>Device Support</a>
            <!-- Dropdown arrow -->
            <span class="slidedown-toggle" data-toggle="collapse-next">
                <span class="sr-only">Toggle Menu</span>
                <span class="fa fa-chevron-right" aria-hidden="true"></span>
                <span class="fa fa-chevron-down" aria-hidden="true"></span>
            </span>
            <!-- Submenu -->
            <ul class="list-reset nav-sub collapse">
                <li class="active">
                    <a href="#">
                        <span class="c-icon c-icon-device-basics c-icon-sm" aria-hidden="true"></span>Device Basics
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="c-icon c-icon-living-with-my-device c-icon-sm" aria-hidden="true"></span>Living with my Device
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><span class="c-icon c-icon-learn-how c-icon-md" aria-hidden="true"></span>Learn How</a>
            <!-- Dropdown arrow -->
            <span class="slidedown-toggle"...

SCSS

.nav-sidebar {
    > ul {
        list-style: none;
        padding: 0;
    }   
}

.slidedown-toggle {
    position: relative;
    cursor: pointer;
    margin-left: 5px;
    .fa {
        position: absolute;
        top: 2px;
        &.fa-chevron-down {
            visibility: hidden;
        }
    }
}

.open {
    .slidedown-toggle {
        .fa-chevron-right {
            visibility: hidden;
        }
        .fa-chevron-down {
            visibility: visible;
        }
    }        
}

JavaScript

$(function(){
   // Extend the Bootstrap data-toggle API
    var $navSidebar = $('.nav-sidebar');
    var $navItemActive = $('.nav-sub').parent('li.active');
    
    // Initialize the Bootstrap Collapse plugin first (IE fix)
    $navSidebar.find('.nav-sub').collapse({toggle: false});
    
    $navSidebar.on('click', '[data-toggle=collapse-next]', function (e) {
        var $navSub = $(this).next();
        var $slidedown = $(this).parents('li');
        $navSub.collapse('toggle');
        $slidedown.toggleClass('open');
    }); 
});