jQuery: Toggling an image when toggling a DIV

Question

Hey guys,

I'm trying to write some jQuery that will toggle DIVs open and closed, and it's working, but I want an arrow that will change to "down" if the DIV is expanded, and "right" if the DIV is collapsed.

What I have so far:

  $('.toggleHead').click(function() {
   $('#arrow').attr('src', 'images/icons/down.png');
   $(this).next().toggle();
   return false;
  }).next().hide();

Where would I put the other $('#arrow').attr('src', 'images/icons/right.png');?

Thanks!

Answer 1

On #arrow - you can use .toggleClass('open') which will add/remove the 'open' class.

Then in your CSS, you can set a background image for .open which will override the 'down' arrow.

I've got something like

$('.accordion-multi h2').click(function() {
    $(this).next().slideToggle('normal');
    $(this).toggleClass('open');
    return false;
}).next().hide();