Change bg image when toggling an accordion menu...

Question

I have an ccordion menu, and each menu header has a little arrow img that changes when the menu slides down and up.

This is the code so far:

$(document).ready(function() {
$("div.menu_body").hide();
$("#menuheader div.menu_head div.detailsPanel").toggle(function() {

    $(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
},

function() {

$(this).removeClass("detailsPanelSelected").parent(this).next("div.menu_body").slideUp("slow");

} );

This works fine when I toggle one menu item at a time.

But say I expand one menu item, and the click on another menu header. What happens is that the first menu item slides up and the newly clicked slides down, just like expected. But the arrow gif doesn't change back on the menu that slides up. This happens because it's toggle function is still in the first state, and if I click on it again, thus removing the "detailsPanelSelected" class, all that happens is that the image changes back. Looking at the code, this is expected.

So my question is, how do I make it so that a menu items "detailsPanelSelected" is removed when another menu header is clicked? Can I somehow reset the pending toggle function?

Answer 1

try something like this:

$("#menuheader div.menu_head div.detailsPanel").toggle(function() {

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

$(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

}

the important part of the code is this:

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

it should be placed above the code in which you add the class that changes the arrow's direction... therefore all of the elements are back to their closed state, then your next function "opens" the correct one