Multi Level Accordion Like Navigation Menu

Question

Trying to create a multi level accordion like navigation menu using jquery . I got this from a post and i was able to do it but the challenge is the sub-sub-items are not getting displayed when clicked on it.

FIDDLE

HTML:

<div class="sidebar">
    <ul>
        <li>
            <a href="javascript:void(0)">Item 1</a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 2</a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                    <ul class="sub-sub-menu">
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 2</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 3</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Sub Sub Item 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 3</a>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 4</a>
        </li>
        <li>
            <a href="javascript:viod(0)">Item 5</a>
        </li>
    </ul>  
</div>

JS:

$('.sidebar > ul > li > a').click(function(ev) {
    $('.sidebar .sub-menu, .sub-menu .sub-sub-menu').stop().slideUp();
    $(this).next('.sub-menu').stop().slideToggle();
    ev.stopPropagation();
});

Please help me in getting this fixed.

Answer 1

Your selectors are bit too specific, same with the classes in the html.

No need to use sub-sub-menu , just keep all sub menus as sub-menu , no matter how nested they are.

Also, loosen up the selector, don't use the child selector > .

Updated fiddle: http://jsfiddle.net/66kJs/4/ (click Item 2, then Sub Item 1)

Update: forgot about the accordion affect! made the fix Update: removed the stop() - if interacting during animation, it would leave artifacts of the previous state of elements