title: Jquery Toggle states issue
body: <p>I'm having a problem with the following code - </p>
  
  <pre><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();
          }
  
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>Any advise greatly received!!</p>
  
  <p>Cheers
  Paul</p>