Twitter Bootstrap fluid-container Sidebar Toggle

Question

I'm using twitter bootstrap to develop an app. 2 column layout. One sidebar and main content. Following is the layout.

<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
        <i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div> 

On clicking a link inside the content i want to hide the sidebar and the content to take up the entire page. Currently I managed to do it this way,

$(document).ready(function(){
$(window).resize(function () { plot(); });

$('.toggles').click(function() {
  $('.target').toggle('fast', function() {
    $('.contents').toggleClass('span12'),
    $('.contents').toggleClass('span9'),
    $('.toggles').toggleClass('icon-chevron-right'),
  });
});
});

But i see a margin in the left side after hiding the span3. This need to be removed. Also in this method of hiding, on the first click the span3 hides and span9 changes to span12. That is somehow working fine. But on second click span3 shows first and then only content span12 reduces to span9. Due to this content jumps down till it it reduces to span9. I want to fix this. On second click, span12 to span 9 first and then sidebar show.. something like that.

I have seen many posts similar to this in which classes "content" and "sidebar" is used instead of 'spanXX'. But its not working in my case. I donno why. Help me please..

Answer 1

Your span9 div is jumping down due to the animation of the toggle effect jQuery adds, it animates both width and height so your content that is around the div that is being toggled gets pushed down as the animation goes. You can overcome this by speeding up the animation process down to something like 100 milliseconds or absolutely positioning the sidebar. And as for the margin issue that is due to the bootstrap.css itself, on line 222 we have the following:

.row-fluid > [class*="span"]:first-child {
  margin-left: 0;
}

The first-child pseudo-element attributes margin:0 to the first element, which in this case is the sidebar that is being toggled, so once the sidebar is hidden the second span tag (the content div) doesn't inherit this property and stays with the default margin applied to the span tag, e.g.

.row-fluid > [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
}

You can overcome that margin issue with jQuery.

Here are a couple of demos i made:

• Hiding sidebar with no transition effects
• Hiding sidebar with minimal transition effect

---

Updated the fiddle with a fix for the issue a commenter found that i did not notice, now it works ok. Added a .no-sidebar class that is added upon toggling that removes the margin-left created by the bootstrap, so now it works with the responsive stylesheet just fine.

http://jsfiddle.net/andresilich/dQ5b7/23/