Bootstrap Collapse accordion

by mylastof

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Navigation</h3>
    </div>
    <div id="sidebar" class="list-group"> 
        <a href="#" class="list-group-item active">
            <i class="icon-dashboard"></i> Dashboard
        </a>
        <a href="#users" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-group"></i> Users
            <span class="badge bg_danger">0</span>
        </a>
        <div id="users" class="list-group subitem collapse">    
            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Users
                <span class="badge bg_danger">0</span>
            </a>
            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create User
            </a>
            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Group
            </a>
            
        </div>
        <a href="#articles" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-file-text"></i> Articles
            <span class="badge bg_danger">0</span>
        </a>
        <div id="articles" class="list-group subitem collapse"> 
            <a href="#" class="list-group-item bg_warning">
                <i class="icon-caret-right"></i> Articles
                <span class="badge bg_danger">0</span>
            </a>
            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Article
            </a>
        </div>
    </div>
</div>

CSS

div.subitem a.list-group-item {
    padding-left: 30px;
}

JavaScript

$('#sidebar > a').on('click', function (e) {
    e.preventDefault();

    if(!$(this).hasClass("active")){
        var lastActive = $(this).closest("#sidebar").children(".active");
        lastActive.removeClass("active");
        lastActive.next('div').collapse('hide');
        $(this).addClass("active");
        $(this).next('div').collapse('show');

    }

});