jQuery Toggle with changing open ena close button

JavaScript
1

I have the following function to slideToggle different divs:


    $(document).ready(function() {
      $( "#toggle a" ).click(function(e){
	    e.preventDefault();
		$("#languages, .logo, .fb, #content").slideToggle("slow");
	  });
    });

By default I use a arrow (up) for the closing action. Css:


#header #toggle a  {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  color: #FFF;
  text-decoration: none;
  background: url("../images/site/close.png") 0 0 no-repeat;
 }

What I would like to accomplish is that the close.png will be replaces with open.png. You can find a example of the page here. What should I change in the function to make those images swap?

Thank you in advance!

2

Hi donboe,

Hard code both images into your page and stick them in a div.
You can then pass slideToggle a callback which will execute when the animation is complete.
Within this callback, you can toggle the images using .toggle()

I made a similar demo for someone else recently.
You can find it here.

HTH

3

Works great Pullo :tup: Thanks a lot