title: Rotate Image on Slide Down
body: <p>I'm currently trying to rotate an image on this site <a href="http://theflouringartisans.com/" rel="nofollow">http://theflouringartisans.com/</a> The goal is to have the arrow images at the top rotate when the contact form is expanded and rotate again when the form is collapsed. This is the code I currently have: </p>
  
  <pre><code>        $(document).ready(function(){
  
              $("#contactbutton").click(function(){
                  if ($("#contact").is(":hidden")){
                      $("#contact").slideDown("slow");
                      $(".arrow").rotateRight(180);
                  }
                  else{
                      $("#contact").slideUp("slow");
                      $(".arrow").rotateRight(180);
                  }
              });
  
          });
  
          function closeForm(){
              $("#thankyou").show("slow");
              setTimeout('$("#thankyou").hide();$("#contact").slideDown("slow")', 2000);
         }
  </code></pre>
  
  <p>I would also like to have the div #thankyou to fade out after 5 seconds from the form being submitted. </p>
  
  <p>Any help is greatly appreciated and I thank you for your time!</p>