expanded vertical divs

Question

I have two DIV

one on the right the the other on the left side

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

I tried this:

<style>
    #container {
       width:100%;
       height:500px;
       border: 1px solid red;
    }
    #left {
        width:45%;
        height:500px;
        float: left;
        border: 1px solid blue;
    }
    #right {
        width:45%;
        height:500px;
        float: left;
        border: 1px solid yellow;
    }
</style>

<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>  


<div id="container">
    <div id="left">
        LEFT
    </div>

    <div id="right">
        RIGHT 
    </div>
</div>

<script type="text/javascript">
    $('#container').click(function(){
        if (parseInt($('div#right').css('right'),10) < 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);
        }
    });
</script>

Answer 1

http://jsfiddle.net/u9Rgv/25/

#container
{
    width:300px;
}
#left,#right
{
    background-color:#000;
    width:10px;
    height:100px;
    overflow:hidden;
}

#left{
    float:left;
}
#right{
    float:right;
}

​

$("a").click(function(){
    var $left = $("#left");
    if($left.css("width")=="10px")
        $left.animate({width: "100%"})
    else 
        $left.animate({width: "10px"});

    var $right = $("#right");
    if($right.css("width")=="10px")
        $right.animate({width: "100%"})
    else 
        $right.animate({width: "10px"});

});​