Question

I have created 2 buttons SHOW & HIDE. And a DIV with content. I when clicked on 1st button content DIV should expand width and it will hide the 1st button, at the same time 2nd button will become visible.

When clicked on 2nd button content DIV should collapse its width and 2nd button will hide, and 1st button will become visible. But its not working.. help me. I don’t have much knowledge of jquery, but I use a bit of it.

$(document).ready(function(){
    $("#seeall2").hide();

    $("#seeall").bind("click",
    function(){
        $("#speakers").animate({width: 880}, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click",
    function(){
        $("#speakers").animate({width: 410}, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
});

This is my HTML :

<div id="speakers">

          <a href="" id="seeall">EXPAND</a>
          <a href="" id="seeall2">COLLAPSE</a>


            <div id="pics-wrap">
 content...
            </div>
</div>

PLEASE SEE THIS http://jsfiddle.net/ajinkyax/mSjbV/
ITS WORKING NOW.
SOLUTION : I removed extra space from SCRIPT tag

Answer 1

Works fine:

$(document).ready(function () {

    $("#seeall2").hide();

    $("#seeall").bind("click", function () {
        $("#speakers").animate({
            width: 880
        }, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click", function () {
        $("#speakers").animate({
            width: 410
        }, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
}); 

jsfiddle