Change bg image when toggling an accordion menu

0 votes
asked May 7, 2009 by soeren

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?

2 Answers

0 votes
answered May 7, 2009 by jhensley

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

0 votes
answered May 26, 2011 by hollandben

sounds like you could do with using the Slidorion. Its a combination of an image slider and an accordian. check it out, might be useful:

http://www.slidorion.com

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...