Question

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 = "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

Answer 1

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