Collapsible sidebar with fluid twitter bootstrap

Question

I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap.

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?

I've created a toggleSidebar icon link to do this, but I have two problems:

1. I can't get it to float with the sidebar using float: left or display: inline-block
2. Fixed, it creates a column of it's own... I want it float on top of the main content.

The html:

<div class="container-fluid">   <div class="row-fluid">     <div id="sidebar" class="span3 scrollDiv" style="display: none;">       <!--Sidebar content-->     </div>     <div id="content" class="span12">       <!--Main content-->     </div>     <a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>   </div> </div> 

The css:

#toggleSidebar {   /* float: left; */   /* display:inline-block; */   position:fixed;   display:block;   left:0;   top:45px;   color:#779DD7;   padding:2px 4px; } 

The javascript:

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);   } }) 

A working example of this: http://jsfiddle.net/amorris/dmyTR/

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:

It's a bit like the effect @ http://simplerealtytheme.com/plugins/pullout-widgets/ - 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.

Answer 1

I think this is what you want, see here.

Relevant code is this:

#content {     float:left; }  #mapCanvas img {     max-width: none; }  #maincont{     margin-top: 42px; }  #toggleSidebar {     float:left;     color:#779DD7;     padding:2px 4px; }  #sidebar{     float:left;    } 

Please confirm that that was what you have in mind!