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!