image toggle problem in accordion menu

Discussion in 'Javascript' started by neetu, Oct 8, 2009.

  1. neetu

    neetu Guest

    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.
     
    neetu, Oct 8, 2009
    #1
    1. Advertising

  2. neetu

    VK Guest

    On Oct 8, 12:31 pm, neetu <> wrote:
    > 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.
     
    VK, Oct 8, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. kiran

    Toggle Image - Problem in IE

    kiran, Jun 3, 2004, in forum: Javascript
    Replies:
    4
    Views:
    122
    Grant Wagner
    Jun 4, 2004
  2. krimgelas

    toggle menu with state?

    krimgelas, Feb 11, 2006, in forum: Javascript
    Replies:
    6
    Views:
    110
    Riccardo from Castle
    Feb 13, 2006
  3. ibizara

    Nested Accordion Menu

    ibizara, Jan 8, 2009, in forum: Javascript
    Replies:
    9
    Views:
    513
    Thomas 'PointedEars' Lahn
    Jan 9, 2009
  4. ibizara

    Nested Accordion Menu

    ibizara, Jan 8, 2009, in forum: Javascript
    Replies:
    1
    Views:
    175
    Gregor Kofler
    Jan 8, 2009
  5. neetu

    Accordion menu with javascript

    neetu, Sep 29, 2009, in forum: Javascript
    Replies:
    1
    Views:
    155
    Thomas 'PointedEars' Lahn
    Sep 29, 2009
Loading...

Share This Page