Sophisticated responsive sidebar menu with jQuery and Bootstrap 3

Question

I have two questions for SO.

• when an element is pressed, it will show it and hide all other elements.
• foldable responsive panel like navbar

My jsFiddle demo first: http://jsfiddle.net/JpJqD/1/

I am working on a collapsible sidebar menu.

As you can see in the demo; when I click articles , I need to collapse (hide) others. Then, if you click users , articles and other items that have a sublevel, you should collapse (hide). Therefore, there should always be one open menu.

I tried with collapse from a Bootstrap document, but I could not with the 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 don't want it to call the required panel class for all elements.

By the way, I want to make a responsive sidebar, like the navbar menu for mobile devices and tablets? I used as in Bootstrap doc, but didn't 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> 

Answer 1

This is what I did, hope this meets your needs:

 <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 corresponds to 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'); } }); 

Answer 2

If you're looking for an auto-collapsible sidebar with animations, this is best for me

---

the code
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar

---

Demo
http://ironsummitmedia.imtqy.com/startbootstrap-simple-sidebar

---