Accordion menu in jQuery

Question

I am playing with a Accordion Menu plugin, specifically example 3 : Non-accordion (standard expandable menu).

I am basically trying to use the example 3 option of this accordion menu by where I have 5 menu options, where two out of the five have sub-menus and the other three don't - they are just direct calls to a page.

Example:

Menu A
Menu B
Sub-Menu B1
Sub-Menu B2
Menu C
Menu D
Sub-Menu D1
Sub-Menu D2
Sub-Menu D3
Sub-Menu D4
Menu E

Everything works fine but what I am after and unsure how to incorporate into the code is that if initially the whole menu is collapsed and I click on Menu B, which slides down sub-menu B content for this menu, what I am after is that as soon as I click on another menu option, say Menu A or even the other sub-menu option D, if there is an existing accordion menu expanded, I would like to see Menu B collapse when I click on either Menu A (no sub-menu) or Menu D (with sub-menu).

How can I incorporate this functionality into this plugin, for example 3 from this website?

Answer 1

From the source at the bottom of the page:

[snip]

if($('#' + parent).hasClass('noaccordion')) {
    $(this).next().slideToggle('normal');
    return false;
}
...

Basically, this line trumps the others: if your accordion has the noaccordion class, it will not automatically close any open elements when you click another.

Removing noaccordion from your ul 's markup would make it behave like the other examples, collapsing any open nodes when you click a different node.