Question

I have an expand and collapse system setup in jQuery/JavaScript. Once you click on the DIV the image that is within the DIV changes its state. But, when you seem to click on that DIV again, the image(s) not return back to it’s original state. It is stuck in it’s alternative state.

Note: I have the script in multiple instances on the same page to create an accordian effect, when you click on a different “ITEM”, the image returns to the original state of the previously selected DIV.

Here is the jsFiddle: http://jsfiddle.net/4Dtd8/

Thank you so much!

Answer 1

Use css to place the image in the background of the h1 tag. Then you can just toggle the class of the item from .open .closed to and let the css handle changing the image.

jQuery('.item .expandacc').click(function() {
    jQuery('.item .expandacc').not(this).removeClass("open").addClass("closed")
        .siblings('.contentacc').slideUp('normal');
    jQuery(this).next('.contentacc').slideToggle('normal');
    jQuery( this ).toggleClass("closed").toggleClass("open");
});

http://jsfiddle.net/petersendidit/4Dtd8/9/