How do you create a collapsable sidebar using Twitter's bootstrap

Question

I have been trying to create a sidebar that will expand and collapse using Twitter\'s Bootstrap project but I am not able to get it working. I am trying to use their basic cont

Answer 1

This is easily achieved… Please see the following Fiddle..

This is the gist of it, though… Basically, the sidebar get's hidden after one second of inactivity with the mouse. You swap out the content (has sidebar) and container-fluid (no sidebar) for your main block, and hide the sidebar. Easy as that.

function onInactive(ms, cb){ 
    var wait = setTimeout(cb, ms); 
    document.onmousemove = document.mousedown =
    document.mouseup = document.onkeydown = 
    document.onkeyup = document.focus = 
    function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
}; }
var sidebar = $('div.sidebar'); 
var content = $('div.content');
$('body').live('mousemove', function(event) {
    sidebar.addClass('sidebar').fadeIn();
    content.addClass('content').removeClass('container-fluid');
});

onInactive(1000, function(){
    sidebar.fadeOut(300);
    content.removeClass('content').addClass('container-fluid');
});

Answer 2

The problem with the layouts in Bootstrap is they aren't fluid - if you use any of their span- classes for layout, they are fixed values (look in the bootstrap.css). Now, that being said, their container-fluid class IS fluid - sort of. It has a min-width set to 940px, and when used with the sidebar class, it has a 240px margin. This is why your sidebar is not collapsing.

You can either modify the bootstrap css (kinda defeating the purpose, IMO), or create a 'custom' stylesheet or use inline styles that override the bootstrap classes, and 'hotwire' those classes to suit your needs, without compromising the bootstrap css directly (making it easy to upgrade).