CODEWITHSUNDEEP
jquery
user520300
user520300

Reputation: 1527

show hide nested ul(s) with jquery?

I have li list with which exapands fine if i click the li are but i want it to expand if i click the link 'a' not the li.

how do i make the jquery below work on the a not the li?

below is the code i have so far:

$("#leftcontent ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function(e) {
        if (this == e.target) {  // if the handler element is where the event originated
            $(this).children('ul').slideToggle('fast');
        }
});

Upvotes: 0

Views: 1251

Answers (1)

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99909

Try this:

$("#leftcontent li > a").click(function() {
    // get the parent <li> of the <a>
    var li = $(this).closest('li');
    // open the child <ul> of the <li>
    li.find(' > ul').slideToggle('fast');
});

Test it here: http://jsfiddle.net/Ye6U5/

And to hide nested uls onload:

$(function() {
    $("#leftcontent li > ul").hide();
});

http://jsfiddle.net/Ye6U5/1/

Upvotes: 4

Related Questions