title: Collapsible sidebar with fluid twitter bootstrap
body: <p>I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap. </p>
  
  <p>I'd like one of those little icons people have on their webpage that looks like a pull tab when the sidebar is closed, and then follows the sidebar out when it is pulled - does this have a name?</p>
  
  <p>I've created a toggleSidebar icon link to do this, but I have two problems:</p>
  
  <ol>
  <li>I can't get it to float with the sidebar using float: left or display: inline-block</li>
  <li>Fixed, it creates a column of it's own... I want it float on top of the main content.</li>
  </ol>
  
  <p>The html:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div id="sidebar" class="span3 scrollDiv" style="display: none;"&gt;
        &lt;!--Sidebar content--&gt;
      &lt;/div&gt;
      &lt;div id="content" class="span12"&gt;
        &lt;!--Main content--&gt;
      &lt;/div&gt;
      &lt;a id="toggleSidebar" href="#" class="toggles"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>#toggleSidebar {
    /* float: left; */
    /* display:inline-block; */
    position:fixed;
    display:block;
    left:0;
    top:45px;
    color:#779DD7;
    padding:2px 4px;
  }
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>function sidebar(panels) {
    if (panels === 1) {
      $('#content').removeClass('span9');
      $('#content').addClass('span12 no-sidebar');
      $('#sidebar').hide();
    } else if (panels === 2) {
      $('#content').removeClass('span12 no-sidebar');
      $('#content').addClass('span9');
      $('#sidebar').show();
    }
  }
  
  $('#toggleSidebar').click(function() {
    if ($.asm.panels === 1) {
      $('#toggleSidebar i').addClass('icon-chevron-left');
      $('#toggleSidebar i').removeClass('icon-chevron-right');
      return sidebar(2);
    } else {
      $('#toggleSidebar i').removeClass('icon-chevron-left');
      $('#toggleSidebar i').addClass('icon-chevron-right');
      return sidebar(1);
    }
  })
  </code></pre>
  
  <p>A working example of this: <a href="http://jsfiddle.net/amorris/dmyTR/" rel="noreferrer">http://jsfiddle.net/amorris/dmyTR/</a></p>
  
  <p>For the life in me, I can't find an example on the web - but here's a quick drawing of what I'm after:
  <img src="https://i.stack.imgur.com/DugDo.jpg" alt="Pull Bar"></p>
  
  <p>It's a bit like the effect @ <a href="http://simplerealtytheme.com/plugins/pullout-widgets/" rel="noreferrer">http://simplerealtytheme.com/plugins/pullout-widgets/</a> - which looks like they're using a display: block; clear: both; and then positioning the pull tab absolutely within the div with a negative right position.</p>