image toggle problem in accordion menu

[neetu]

I have an accordion menu, and each menu header has a little plus
symbol img that changes to minus symbol img when the menu slides down
and up.

This is the code so far:

$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(/it_media/v4/images/
minus2.gif)"}).next("div.menu_body").slideToggle(300).siblings
("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(/
it_media/
v4/images/plus2.gif)"});

});
});

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 img 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, all
that happens is that the image changes back.

 

[VK]

This is the code so far:

If using a 3rd party library it helps to name this library, like "here
is my current jQuery-based code"

        $(document).ready(function()
        {
            $("#firstpane p.menu_head").click(function()
            {
                $(this).css({backgroundImage:"url(/it_media/v4/images/
minus2.gif)"}).next("div.menu_body").slideToggle(300).siblings
("div.menu_body").slideUp("slow");
                $(this).siblings().css({backgroundImage:"url(/
it_media/
v4/images/plus2.gif)"});

            });
        });

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 img 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,  all
that happens is that the image changes back.

well, slideUp method has callback argument http://docs.jquery.com/Effects/slideUp

I would suggest to move all open/closed design change logic to a
callback function rather than to the starter. It should solve your
problem and it is also logical: the menu is not closed or open until
it's fully closed or open.