title: Convert Dropdown Accordion to Slideout Menu by adding toggle_class()
body: <p>I have a menu built using Bootstrap 3.0. It floats to the left and can be re-sized to fit only the icons by adding a css class to it using jQuery's toggle_class(). What I want to achieve is once this menu is toggled to a smaller version, I would like the drop down menu to become a vertical slide out menu. 
  Here is an example of what I am trying to accomplish <a href="http://wrapbootstrap.com/preview/WB0B30DGR" rel="nofollow">http://wrapbootstrap.com/preview/WB0B30DGR</a> If there is a plugin that does please point me to it.</p>
  
  <p>Here is my HTML code: </p>
  
  <pre><code>    &lt;div id="wrap"&gt;
      &lt;div id="content"&gt;      
          &lt;div id="navigation" class="" role="navigation"&gt;
  
              &lt;!-- Sidebar --&gt;
              &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                    &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="fa fa-bar"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-bar"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-bar"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;a class="navbar-brand" href="./"&gt;CIMP Admin&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!--SIDENAV
                  ============================================= --&gt;
                  &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                      &lt;ul class="nav navbar-nav side-nav"&gt;
                          &lt;li class="active" &gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Dashboard&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown "&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fa fa-camera"&gt;&lt;/i&gt; Media &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-picture-o"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-picture-o"&gt;&lt;/i&gt; Albums&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-picture-o"&gt;&lt;/i&gt; Slideshows&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;!-- Modules --&gt;
                          &lt;li class="dropdown "&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fa fa-puzzle-piece"&gt;&lt;/i&gt; Modules &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-thumb-tack"&gt;&lt;/i&gt; Posts&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-cloud"&gt;&lt;/i&gt; Uploads&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-desktop"&gt;&lt;/i&gt; Testimonials&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;           
                          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-users"&gt;&lt;/i&gt; Users&lt;/a&gt;&lt;/li&gt;
                          &lt;li calss="active"&gt;&lt;a id="toggle-pane" href="#"&gt;&lt;i class="fa fa-caret-square-o-left"&gt;&lt;/i&gt; Hide Menu Bar&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;&lt;!--/ nav --&gt;
  
          &lt;/div&gt;&lt;!--/ navigation --&gt;
      &lt;/div&gt;&lt;!--/ content --&gt;
  &lt;/div&gt;&lt;!-- wrap --&gt;
  
  &lt;script type="text/javascript"&gt;
      $("#toggle-pane").click(function () {
          $('#wrap').toggleClass("folded");
      });
  &lt;/script&gt;
  </code></pre>