SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change bg image when toggling an accordion menu…

    I have an ccordion menu, and each menu header has a little arrow img that changes when the menu slides down and up. The arrow img is a background image that is added to the detailsPanel div.

    This is the code so far:

    Code:
    $(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 then 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 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. #2
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •