Accordion Multi Level Menu

Multi Level Navigation Menu

by B L Praveen

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-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:void(0)">Item 3</a>
            </li>
            <li>
                <a href="javascript:void(0)">Item...

CSS

.sidebar ul ul {
    display:none;   
}

JavaScript

$(document).ready(function() {
	$('.sidebar ul li a').click(function(ev) {
        $('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
	    $(this).next('.sub-menu').slideToggle();
	    ev.stopPropagation();
	});
});