Basic Accordion Menu

by John VDL

HTML

<ul id="nav">
    <li>
        <a href="#">Section</a>
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Section</a>
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Section</a>
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Section</a>
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Section</a>
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Product</a></li>
        </ul>
    </li>
</ul>

CSS

body {
    padding:20px;
}
.open {
    display:block;
}
ul ul {
    margin-left:20px;
}

JavaScript

//get a reference to the nav <ul>
$nav = $("#nav");

//hide all but the first sub list
$nav.find("ul:not(:first)").hide();

//mark the first sub list as open
$nav.find("ul:first").addClass("open");

//receive clicks on the section links
$nav.on("click", "li>a", function(e) {

    //get a reference to the currently clicked link and its list item
    $this = $(this);
    $currentLi = $this.closest("li");

    //if our current section is open, just return
    if ($currentLi.find(".open").is("ul")) {
        //if you want a section link to be able to collapse itself, uncomment this line:
        //$currentLi.find("ul.open").slideUp().removeClass("open")
        return;
    }

    //close all open lists
    $nav.find("ul.open").slideUp().removeClass("open");

    //open the submenu that belongs to this section
    $currentLi.find("ul").slideDown().addClass("open");

});