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

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