Question

I am makign a simple accordion for my nav on mobile devices. The HTML has a structure like this:

    <nav>
    <ul id="topMenu">
    <li>
        <ul>
            <li><h3><a href="#">Work</a></h3></li>
            <li><a href="/work/">Brand ID</a></li>
            <li><a href="/work/">Print</a></li>
            <li><a href="/work/">Book & Editorial</a></li>
            <li><a href="/work/">Web</a></li>
            <li><a href="/work/">Packaging</a></li>
            <li><a href="/work/">Exhibit</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><h3><a href="#">About</a></h3></li>
            <li><a href="/about/">Our Story</a></li>
            <li><a href="/about/">Methodology</a></li>
            <li><a href="/about/">Team</a></li>
            <li><a href="/about/">Studio</a></li>
            <li><a href="/about/">Services</a></li>
            <li><a href="/about/">Partners</a></li>
        </ul>
    </li>
</ul>
</nav>

When the screen sizes reaches mobile, I have a whole new set of css (using media queries) to acheive a screen just like this:

The first-child displays, and the rest are hidden. I am using jquery to create the accordio-style reveal like so:

$("nav #topMenu li ul").toggle(function(){
    $(this).children("li").stop().slideDown();
}, function(){
    $(this).children("li:nth-child(1n+2)").stop().slideUp();
});

This works great; however, I am looking for a behavior where when one panel opens, the rest close. SO, at any given time, just one panel would be open on the accordion. This is a common behavior for accordions.

Can you help out with the jquery to slide down all open panels when a user clicks any of the parent-level list items? Thanks!

Answer 1

Here is a quick workaround http://jsfiddle.net/sethunath/wayfP/
Here I am triggering the click of the next ul if it it is visible