jQuery Toggle with changing open ena close button

I have the following function to slideToggle different divs:

    $(document).ready(function() {
      $( "#toggle a" ).click(function(e){
		$("#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!

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.


Works great Pullo :tup: Thanks a lot