CODEWITHSUNDEEP
twitter-bootstrap
Tree
Tree

Reputation: 1248

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

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 container-fluid layout as a starting point. I am not able to even hide the sidebar properly and expand the "content" area to the full width of the screen. Instead, the sidebar text will disappear but the content area will not expand. I have changing the width of the sidebar and content but I cannot seem to alter it. Thanks for any help with this.

I have also been looking here

Upvotes: 8

Views: 7627

Answers (2)

Alex Gray
Alex Gray

Reputation: 16473

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

Upvotes: 5

Joyrex
Joyrex

Reputation: 1103

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

Upvotes: 0

Related Questions