CODEWITHSUNDEEP
jqueryhtmlcss
Alex Sadler
Alex Sadler

Reputation: 433

Open one class, close others

I have written a little list menu with expandable categories using this little piece of jQuery

$("#menu ul li ul").hide();

$("#menu ul li").click(function() {
    $(this).find("ul").slideToggle();
});

There is a full jsFiddle of the menu here: http://jsfiddle.net/AlexSadler/uRwh7/7/

The only problem is that when one category is open and I go to open another, the first one doesn't close and I end up running out of space. Does anybody know how I could rectify this?

Upvotes: 0

Views: 362

Answers (2)

Chinmayee G
Chinmayee G

Reputation: 8117

Try this code,

$("#menu ul li ul").hide();

$("#menu ul li").click(function() {
    $("#menu ul li ul").hide();
    $(this).find("ul").slideToggle();
});

Upvotes: 0

nickf
nickf

Reputation: 546055

$('#menu ul li').click(function() {
    $(this)
        .find('ul')
        .slideToggle()
        .end()
        .parent()
        .siblings()
        .find('li ul')
        .hide()
    ;
});

Upvotes: 1

Related Questions