jquery accordion menu states

Question

I have a accordion menu with a header image that changes based on the state (open/closed) the problem is once any part of the menu is open the open state images stays, even if the section of the menu is closed. I'd like the closed state to come back once that part of the menu is closed.

Code

     $(document).ready(function() {
        //slides the element with class "menu_body" when paragraph with class 
        //"sidemenu_head" is clicked 
        $("#firstpane p.sidemenu_head").click(function() {
            $(this).css({backgroundImage:"url(g/down.png)"})
                   .next("div.sidemenu_body")
                   .slideToggle(300)
                   .siblings("div.sidemenu_body")
                   .slideUp("fast");

            $(this).siblings()
                   .css({backgroundImage:"url(left.png)"}); 
    });

The Page

http://eepurl.com/cKQd

Answer 1

I recommend using the change event of the accordion. Your handler will be passed references to both the header and the content elements of both the closing and opening accordion item.

$('#my-accordion').bind('accordionchange', function(event, ui) {
    ui.oldHeader.css( /* swap bg img */ );
    ui.newHeader.css( /* swap bg img */ );
});

Answer 2

Something like this should do it

$("#firstpane p.sidemenu_head").click(function()
{
     if ($(this).css("backgroundImage") == "url(g/down.png)") {
          $(this).css({backgroundImage:"url(g/left.png)"})
     }
     else {
          $(this).css({backgroundImage:"url(g/down.png)"})
     } 
     $(this).next("div.sidemenu_body").slideToggle(300)
          .siblings("div.sidemenu_body").slideUp("fast");
     $(this).siblings().css({backgroundImage:"url(left.png)"}); });
});

*Fixed a missing ), this should work.

Answer 3

Jquery toggle might work for you. I removed the show/hide div for simplicity but you can easily add it back:

$(document).ready(function()
{
 $('#firstpane p.sidemenu_head').toggle(
  function()
  {
   $(this).css({ backgroundImage: "url(g/down.png)" });

  }, function()
  {
   $(this).css({ backgroundImage: "url(g/left.png)" });

  });
});

Answer 4

That doesn't really work. It just creates another click that that will change the carrot, but now you have to click twice to reveal the content (once to change the carrot and again the reveal).