Question

I’m trying to create a custom accordion using jquery, have read through quite a few solution on stackoverflow but I just can’t seem to get mine to work, I believe it has to deal with the .siblings. Anyway, here is my html code:

<div class="menu">
    <ul>
        <li class="current">
            <a href="#" class="current"><img class="icon" src=""/>Dashboard</a>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Mail</a>
            <ul class="submenu">
                <li>
                    <a href="#" title="">Write New</a>
                </li>
                <li>
                    <a href="#" title="">Junk</a>
                </li>
                <li>
                    <a href="#" title="">Deleted</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><img class="icon" src=""assets/colors.png""/>Child</a>
            <ul class="submenu">
                <li>
                    <a href="#">Child 1</a>
                </li>
                <li>
                    <a href="#">Child 2</a>
                </li>
                <li>
                    <a href="#">Child 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Grid</a>
        </li>
        <li>
            <a href="#"><img class="icon" src=""/>Class</a>
        </li>
    </ul>
</div>

And here is my jQuery code:

$('.menu ul li a').click(function() {

    $(this).next('.submenu').siblings('li').slideUp();
    $(this).next('.submenu').slideToggle();

});

The menu toggles open fine, but when I open one, the others won’t close.

Thanks for your help !!

Answer 1

The reason why it won’t close is because the siblings will look at the same level. So within the LI element it looks for more LI elements. You wan’t the sibling LI‘s from the parent, and close there child .submenu.

Try this:

$(this).parent().siblings('li').find('.submenu').slideUp();