vertical expand div
<p>I have two DIV</p>

<p>one on the right the the other on the left side</p>

<p>I'm looking for a code that give me link and by clicking on this link both divs will expand to 100% (mean that one of them will slide down) and by click again they will return back to be side by  side</p>

<p>Thanks in advanced</p>

<p>I tried this:</p>

<pre><code>&lt;style&gt;
#container {
   width:100%;
   height:500px;

}
#left {

    width:45%;
    height:500px;
    float: left;
}
#right {

    width:45%;
    height:500px;
    float: left;
}
&lt;/style&gt;

&lt;script type="text/javascript" src="scripts/jquery-1.8.0.min.js"&gt;&lt;/script&gt;  


&lt;div id="container"&gt;
      &lt;div id="left"&gt;
       LEFT
    &lt;/div&gt;

      &lt;div id="right"&gt;
        RIGHT 
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
$('#container').click(function(){
        if (parseInt($('div#right').css('right'),10) &lt; 0) {
                 // Bring right-column back onto display
                  $('div#right').animate({
                      right:'0%'
                  }, 1000);

                  $('div#left').animate({
                    width:'45%'
                  }, 600);
                } else {

        // Animate column off display.
                  $('div#right').animate({
                      right:'-45%'
                  }, 600);

                  $('div#left').animate({
                    width:'100%'
                  }, 1000);
        }

});
&lt;/script&gt;
</code></pre>
