Change bg image when switching accordion menu
I have a ccordion menu and each menu title has a little img arrow that changes as 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 great when I switch one menu item at a time.
But tell me I'm expanding one menu item and clicking on another menu title. What happens is that the first menu item slides off, and recently clicking the slides down as expected. But the gif arrow doesn't change in the menu that slides up. This is because the toggle function is still in the first state, and if I click on it again, removing the "detailsPanelSelected" class, all that happens is that the image has changed. Looking at the code, this is expected.
So my question is, how do I make it so that the "detailsPanelSelected" menu items are removed when a different menu title is clicked? Can I somehow reset undo the toggle function?
a source to share
try something like this:
$ ("# menuheader div.menu_head div.detailsPanel"). toggle (function () {
$ ("detailsPanelSelected"). Each (function (s) {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 (s) {this.removeClass ("detailPanelSelected");})
it needs to be placed above the code where you add the class that changes the direction of the arrow ... so all items are returned to a closed state and then your next function "opens" the correct one.
a source to share