toggle or show/hide question

toggle or show/hide question

hello.

i have 2 divs side by side that are both width 50%.

i want to make it so that when you click on the left or right div the other one will disappear and the remaining div will change to 100%. then when you click it the second time it will return to 50% and the other div appear.

this is what i have


  1.     $('.scroller').click(function(){
           
            if ($(this).hasClass("left")){

                $(".right").hide();
                $(".left").css({"width":"100%"});
               
            } else if ($(this).hasClass("right")){

                $(".left").hide();
                $(".right").css({"width":"100%"});
           
            }
           
        });   
















  1.       <div class="bb-item" id="item2">
                            <div class="content">
                                <div class="scroller left">
                                    <img src="assets/images/pages/p2.jpg" ALT="page2">
                                </div>
                                <div class="scroller right">
                                    <img src="assets/images/pages/p3.jpg" ALT="page3">
                                </div>
                            </div>
                        </div>











that hides the div and resizes the other fine but how do i get it to return on the second click ?

thanks

ricky