Question

I am creating a dropdown contact form and you can view the code below:

http://jsfiddle.net/VtQbE/4/

Basically at current there is a black button that when is pressed it triggers the jquery to drop down and display the form.

What I want to do is have a background image showing a “down arrow” and then after the button is pressed and it drops down to display the form, I want an “up arrow”

It seems so simple but I have not found a way to do this whilst messing around with it.

Any ideas would be greatly appreciated!!

Answer 1

Add a arrow down background image to <div id="contactLink"></div> like this <div id="contactLink" style="background:url('arrowdown.png')"></div> then in your function

$("#contactLink").click(function(){
   if ($("#contactForm").is(":hidden")){
      $("#contactForm").slideDown("slow");
      $('#contactLink').css('background', "url('arrowup.png')");
   }else{
      $("#contactForm").slideUp("slow");
      $('#contactLink').css('background', "url('arrowdown.png')");
   }
});