title: Dropdown menu on sidebar
body: <p>I retrieved a code on Bootsnipp, which I try to adapt ...</p>
  
  <p>I would like the menu present in the drop down to appear in the sidebar
  How to do it?</p>
  
  <p>The JsFiddle : <a href="https://jsfiddle.net/2hpxxpez/" rel="nofollow noreferrer">https://jsfiddle.net/2hpxxpez/</a></p>
  
  <p>HTML :</p>
  
  <pre><code>  &lt;header role="banner" class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
        &lt;button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"&gt;
          &lt;i class="glyphicon glyphicon-menu-hamburger"&gt;&lt;/i&gt;
        &lt;/button&gt;
  
        &lt;div class="side-collapse in"&gt;
          &lt;nav role="navigation" class="navbar-collapse"&gt;
            &lt;!-- &lt;ul class="nav navbar-nav" &gt;
              &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#users"&gt;Users&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://placesforlove.com"&gt;Places&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt; --&gt;
            &lt;ul class="nav navbar-nav" &gt;
              &lt;li class="dropdown"&gt;
                &lt;a&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="container side-collapse-container"&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;p&gt;This is a side opening nav demonstration&lt;/p&gt;
      &lt;p&gt;Make your browser smaller and the top menu wil become into a lateral slider menu&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>$(document).ready(function() {   
    var sideslider = $('[data-toggle=collapse-side]');
    var sel = sideslider.attr('data-target');
    var sel2 = sideslider.attr('data-target-2');
    sideslider.click(function(event){
      $(sel).toggleClass('in');
      $(sel2).toggleClass('out');
    });
  });
  </code></pre>
  
  <p>I want this result :</p>
  
  <p><a href="https://i.stack.imgur.com/fJ8um.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fJ8um.png" alt="enter image description here"></a></p>