Collapsible responsive sidebar menu with jQuery and Bootstrap 3

Question

I have two question for SO.

1. when item clicked, show it and hide all other items
2. collapsible responsive sidebar like navbar

At first my jsFiddle Demo: http://jsfiddle.net/JpJqD/1/

I'm working to do collapsible sidebar menu.

As you can see in the demo; when i click articles, should be collapse(hide) others. Then if click to users, articles and other items that have sublevel should be collapse(hide). So always should be one opened menu.

I tried with collapse from Bootstrap document, but i couldnt with following codes:

$('#sidebar a').on('click', function () {
    $(this).closest('div').find('.collapse').collapse('hide');
    $(this).collapse('show');
});

I can do this with accordion but i dont wanna it cause of required panel class for all items.

BTW I want to make responsive sidebar like navbar menus for mobile and tablets? I used like in Bootstrap document but didnt work.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

Solution 1

This is what i did , hope it fits your need :

<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>

And this is the corresponding js :

$('#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');

    }

});

Solution 2

If you are looking for auto collapsible sidebar with animation this is the best according to me

---

Code
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar

---

Demo
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar

---