Jquery Toggle states issue

I'm having a problem with the following code -

function slideContactDetails() {


        if (sliderState == "closed") {
            $(".sliderBlock").animate({width:400}, 'slow',function() {$("div.sliderForm").fadeIn("fast");   });
            sliderState = "open";
            setTimeout(function(){switchImg("first")},300);


        }
        else if (sliderState =="open") {
            $(".sliderBlock").animate({width:0}, 'slow',function() {$("div.sliderForm").fadeIn("fast"); });
            sliderState="closed";
            setTimeout(function(){switchImg("second")},300);

        }

    };

var firstState = "images/closeTab.png";
    var secondState =开发者_如何学JAVA "images/contact_us.png"
    function switchImg(imgNo){
        if (imgNo == "first"){
            $('.contactBtnBtn img').attr("src", firstState);
            $('.sliderBlockForm').show();
        }
        else if (imgNo == "second"){
            $('.contactBtnBtn img').attr("src", secondState);   
            $('.sliderBlockForm').hide();
        }

    }

basically I'm trying to open and close an animated 'contact us' div. When opened I want the image to switch to a close image and visa-versa on close.

The issue I have is that the image switches as requested, but only for a split second as the sliderstate variable has now altered the 'else if' also appears to action and changes the image back again! I have tried to fix using timeouts, this works in all broswers apart from Chrome!

Any advise greatly received!!

Cheers Paul

---

$("div.sliderForm").click(
   $(this).toggle('slow');
);

---

Couldn't you just place the image switching in the if/else block, and remove the need for the setTimeout()?

function slideContactDetails() {
    if (sliderState == "closed") {
        $(".sliderBlock").animate({
            width: 400
        }, 'slow', function () {
            $("div.sliderForm").fadeIn("fast");
        });
        sliderState = "open";
        $('.contactBtnBtn img').attr("src", firstState);
        $('.sliderBlockForm').show();
    } else {
        $(".sliderBlock").animate({
            width: 0
        }, 'slow', function () {
            $("div.sliderForm").fadeIn("fast");
        });
        sliderState = "closed";
        $('.contactBtnBtn img').attr("src", secondState);   
        $('.sliderBlockForm').hide();
    }
};

---

the following worked for me based on Coding Freaks's answer.

$(".sliderBlock").hide();

       $('img.slider').toggle(
       function()
       {

          $(".sliderBlock").animate({width:400}, 'slow',function()    {$('.contactBtnBtn img').attr("src", "images/closeTab.png");$('.sliderBlockForm').show();});


       },
       function()
       {    
            $('.sliderBlockForm').hide();

          $(".sliderBlock").animate({width:0}, 'slow',function() {$('.contactBtnBtn img').attr("src", "images/contact_us.png");});

       });