Accordion Navigation

by Emily Humphrey

HTML

<nav class="sidebar">
    <div class="sidebar-section collapse">
        <h2>Processes</h2>
        <ul class="nav-ctn">
            <li><a href="">Developers Process</a></li>
            <li><a href="">Creative Process</a></li>
        </ul>
    </div>
    <div class="sidebar-section collapse">
        <h2>Instructions</h2>
        <ul class="nav-ctn">
            <li><a href="">New Website Setup</a></li>
        </ul>
    </div>
    <div class="sidebar-section collapse">
        <h2>Snippets</h2>
        <ul class="nav-ctn">
            <li><a href="">Conformed Box Heights</a></li>
            <li><a href="">Vertically Center</a></li>
            <li><a href="">Auto Clear</a></li>
            <li><a href="">Live Push</a></li>
            <li><a href="">Smooth Scrolling</a></li>
        </ul>
    </div>
</nav>

JavaScript

var sidebarSection = $("div.sidebar-section"),
    sidebarlists = sidebarSection.children("ul");

sidebarSection.each(function(){
    var thisSection = $(this),
        thisBtn = thisSection.children('h2'),
        thisList = thisSection.children('ul');
    thisList.slideUp(0);
    thisBtn.click(function(){
            sidebarlists.slideUp(300);
            thisList.slideDown(300);      
    });

});