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