title: Collapsible responsive sidebar menu with jQuery and Bootstrap 3
body: <p>I have two question for SO.</p>
  
  <ol>
  <li>when item clicked, show it and hide all other items</li>
  <li>collapsible responsive sidebar like navbar</li>
  </ol>
  
  <p><strong>At first my jsFiddle Demo:</strong> <a href="http://jsfiddle.net/JpJqD/1/" rel="noreferrer">http://jsfiddle.net/JpJqD/1/</a></p>
  
  <p>I'm working to do collapsible sidebar menu. </p>
  
  <p>As you can see in the demo; when i click <code>articles</code>, should be collapse(hide) others.  Then if click to <code>users</code>, <code>articles</code> and other items that have sublevel should be collapse(hide). So always should be one opened menu.</p>
  
  <p>I tried with <code>collapse</code> from Bootstrap document, but i couldnt with following codes:</p>
  
  <pre><code>$('#sidebar a').on('click', function () {
      $(this).closest('div').find('.collapse').collapse('hide');
      $(this).collapse('show');
  });
  </code></pre>
  
  <p>I can do this with <code>accordion</code> but i dont wanna it cause of required <code>panel</code> class for all items.</p>
  
  <p>BTW I want to make responsive sidebar like <code>navbar</code> menus for mobile and tablets? I used like in Bootstrap document but didnt work.</p>
  
  <pre><code>&lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
  </code></pre>