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.

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.

• javascript
• jquery
• jquery-ui
• css

Share Improve this question Follow asked Nov 23, 2013 at 11:11 Unknown UserUnknown User 3,66899 gold badges4444 silver badges8181 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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/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