Search code examples
jquerymenuaccordionsubmenusiblings

jquery accordeon menu, sibling open sub-menu

I'm suing a jquery code to open and close sub menu when clicking on menu item. it works fine, but I have trouble to close the opened sub menu when clicking on another top menu item.

for example, when clicking on menu 2, when sub-menu 1 is already openned, I want sub-menu 1 to close when sub-menu 2 opens.

i guess I'm doing something wrong whith the sibling function but I can't find out what...

here is my HTML (I can't modify my html, it's a wordpress generated menu

<div class="menu-menu_top-container">
    <ul id="menu-menu_top" class="menu">
        <li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-67"><a href="#">MENU 1</a>
            <ul class="sub-menu">
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-63"><a href="#">SUB MENU 1</a></li>
                <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="#">SUB MENU 2</a></li>
                <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="#">SUB MENU 3</a></li>
                <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="#">SUB MENU 4</a></li>
                <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="#">SUB MENU 5</a></li>
                <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"><a href="#">SUB MENU 6</a></li>
            </ul>
        </li>

        <li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-76"><a href="#">MENU2</a>
            <ul class="sub-menu">
                <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="#">SUB MENU 1</a></li>
                <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="#">SUB MENU 2</a></li>
                <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="#">SUB MENU 3</a></li>
                <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="#">SUB MENU 4</a></li>
            </ul>
        </li>
        <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#">MENU 3</a></li>
        <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="#">MENU 4</a></li>
        <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">MENU 5</a></li>
        <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="#">MENU 6</a></li>
    </ul>
</div>

here is my JS code :

$("ul.sub-menu").hide();
$(".menu-menu_top-container li a").click(function() {
    $(this).next("ul.sub-menu").slideToggle('xfast').siblings('ul.sub-menu:visible').slideUp('xfast');
});

and a jsfiddle : http://jsfiddle.net/MFb8f/1/

can anybody help me with this ?

thanks a lot,

Solution 
  • $(".menu-menu_top-container li a").click(function () {
    $('ul.sub-menu').not( $(this).next() ).slideUp();
    $(this).next("ul.sub-menu").slideToggle();
});

    http://jsfiddle.net/isherwood/MFb8f/11