title: Toggle sidebar in bootstrap3?
body: <p>I'm trying to get a togglable sidebar:</p>
  
  <p>No sidebar:</p>
  
  <pre><code>&gt;&gt; | Main text
     | goes here
  </code></pre>
  
  <p>With sidebar:</p>
  
  <pre><code>H1 &lt;&lt; | Main text
  H2    | goes here
  </code></pre>
  
  <p>(here is an example of the behaviour: <a href="http://pythonhosted.org/cloud_sptheme" rel="nofollow noreferrer">http://pythonhosted.org/cloud_sptheme</a> -- see the button on sidebar. It's not easy to use its code base, because it's not bootstrap-based)</p>
  
  <p>I started from a working example which uses Bootstrap 2 and jQuery 1.8: <a href="http://jsfiddle.net/amorris/dmyTR" rel="nofollow noreferrer">jsfiddle</a>, <a href="https://stackoverflow.com/questions/13604285/collapsable-sidebar-with-fluid-twitter-bootstrap">SO question</a>, and tried to make it work on Bootstrap 3. Here's a code (<a href="http://bootply.com/104837" rel="nofollow noreferrer">code on bootply</a>):</p>
  
  <p>javascript:</p>
  
  <pre><code>$.asm = {};
  $.asm.panels = 1;
  
  function sidebar(panels) {
      $.asm.panels = panels;
      if (panels === 1) {
          $('#content').removeClass('col-md-9');
          $('#content').addClass('col-md-12');
          $('#sidebar1').removeClass('show');
          $('#sidebar1').addClass('hide');
      } else if (panels === 2) {
          $('#content').removeClass('col-md-12');
          $('#content').addClass('col-md-9');
          $('#sidebar1').removeClass('hide');
          $('#sidebar1').addClass('show');
      }
  }
  
  $('#toggleSidebar').click(function() {
      if ($.asm.panels === 1) {
          $('#toggleSidebar').addClass('fa-backward');
          $('#toggleSidebar').removeClass('fa-forward');
          return sidebar(2);
      } else {
          $('#toggleSidebar').removeClass('fa-backward');
          $('#toggleSidebar').addClass('fa-forward');
          return sidebar(1);
      }
  })
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#toggleSidebar {
    position:fixed;
    display:block;
    left:0;
    top:45px;
    color:#779DD7;
    padding:2px 4px;
  }
  
  hide {
      display: none;
  }
  
  show {
      display: inherit;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3 hide" id="sidebar1"&gt;
        &lt;div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary"&gt;
  
          Toc goes here.
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-12" id="content"&gt;
  
        Main text goes here.
  
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;a id="toggleSidebar" href="#toggleSidebar1" class="fa fa-forward"&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit</strong>:</p>
  
  <p>Off canvas is not what I need: it doesn't conserve the horizonatal space, it shifts the div to the right, and the div gets out of the screen. Chanding <code>col-md-9</code> to <code>col-md-12</code> and back -- is the best thing I can think of for a problem at hand. This should be simple javascript, which I'm not good at.</p>