Question

If I click "Media," it slides down and displays the sub links. I then click on "Items" and it also slides down exposing its links within. How can I hide "Media" when I click on "Items?"

HTML code

<ul id="nav">
<li><a href="#" class="collapse">Media</a>
    <ul>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Audio</a></li>
        </ul>
</li>
<li><a href="#" class="collapse">Items</a>
    <ul>
        <li><a href="#">Add</a></li>
        <li><a href="#">List</a></li>
        </ul>
</li>
</ul>

JS Code

// Collapsable navigation
$('ul#nav .collapse:not(.open)').parents('li').find('ul').hide();

$('ul#nav .collapse').click(function() {
    if( ! $(this).hasClass('open') ) {
        $(this).parents('li').find('ul').stop(true, true).slideDown('fast');
        $(this).addClass('open');
    } else {
        $(this).parents('li').find('ul').stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    }
      return false;
});

Answer 1

The accordion logic is pretty simple, here’s a commented version:

$('#nav .collapse').click(function () {
    //stores a reference to the `ul` which will be toggled
    var toToggle = $(this).closest('li').find('ul');
    //hide the others
    $('#nav ul').not(toToggle).slideUp(200);
    //toggle the clicked one
    toToggle.slideToggle(200);
    return false;
});

Fiddle

---

You can make the code even shorter by removing the unnecessary variable but then it loses some readability:

$('#nav .collapse').click(function () {
    $('#nav ul').not(
        $(this).closest('li').find('ul').slideToggle(200)
    ).slideUp(200);
    return false;
});

Fiddle