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..

Solution

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/

Comments

[Nelson Reis]

This is a great solution. However, I spotted an issue that you can see on your demos. Whenever you click on any element of the #content, your margin will change. Are you able to fix it?

[Andres Ilich]

@NelsonReis The margin changes because it is a fluid document, if you want a fixed document all you have to do is change the <div class="container-fluid"> to simply container and the <div class="row-fluid"> container to simply <div class="row">

[Andres Ilich]

@NelsonReis here is a patched version with no fluid marks, jsfiddle.net/dQ5b7/21

[Nelson Reis]

That's not what I meant. If you try to click on any element on the #content, like any text on your page, the margins will change. Seems like the event is being triggered on any element click, not when you click on the toggle element.

[Nelson Reis]

Andres, the same problem occurs on your new version as well.

[Andres Ilich]

@NelsonReis Argh, saw it, embarrassing error :P, ill fix it up in a few minutes and update my answer above (gotta run to work). Will edit this message once its up.

[Andres Ilich]

@NelsonReis updated the fiddle and now it works fine, added a class to toggle instead of toggling the css directly in jquery, this way the demo can support the media queries set by the responsive stylesheet. demo

[Ray]

None of these really work for me, the whole point of using animate is to animate it, if you set it to something like 250ms, it completely breaks, it will put the main content under the sidebar, then put it back up when the sidebar is fully closed.