Question

Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?

Please find the code below;

http://jsfiddle.net/N7xgC/

Answer 1

What you’re currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren’t a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.

$(document).ready(function() {
    $('.main > li > a').click(function() {
        var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
        $('.sub').not(sibling).hide(); // hide everything except that element
        sibling.toggle(); // toggle that element
    });
});

Updated jsFiddle