HTML / CSS fluid collapsible sidebar

Question

I'm trying to make a toggleable sidebar for this website, and what I want is the content shown below

I want the main content to be fluid and adapt after how much space it has on the screen. Is there an easy way to do this without using a framework like twitter bootstrap etc.... So what I'm asking is there anyone that know a way to make the sidebar collapsible without any framework?

hmmm css and javascript will do the job.. just set the divs and make jquery do the rest — Jorge Y. C. Rodriguez, Jun 22 '13 at 22:21

score 2 · Answer 1 · answered Jun 22 '13 at 22:30

http://jsfiddle.net/MNgMB/1/

Is this what you were looking for? Let me know.

HTML

<div id="inline_container">
    <div id="toggle_menu">
        <div id="toggle">
        </div>
    </div>
    <div id="main_container">main container</div>
</div>

Javascript

var toggled = true;

$("#toggle_menu").click(function(){
    if(toggled) {
        toggled=false;
    $(this).animate({width: "20px"}, "fast");
    }else {
        toggled=true;
            $(this).animate({width: "200px"}, "fast");
    }
});

CSS

* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#inline_container {height: 500px; width: 100%;}
#toggle_menu {height: 100%; width: 20px; display: inline-block; float: left; background: lime;}
#main_container {height: 100%; width: 65%; display: inline-block; float: left;}
#toggle {height: 100%; width: 20px; display: inline-block; float:left; background: green;}

HTML / CSS fluid collapsible sidebar

1 Answers1