CODEWITHSUNDEEP
jquery
Brad Herman
Brad Herman

Reputation: 10695

How can I collapse a nested list using jQuery?

I have a nested list:

<ul>
  <li><a href='#'>stuff</a></li>
  <li><a href='#'>stuff2</a></li>
    <ul>
      <li><a href='#'>stuff3</a></li>
    </ul>
  <li><a href='#'>stuff4</a></li>
</ul>

...and want to collapse the nested ul when the li is clicked. Before I was using

$('UL LI').click(function(){
  $(this).next().slideToggle();
});

...but this obviously causes a problem when a li doesn't have a ul nested after it. Is there a better way to do this, or is there a way for me to determine if the object returned by $(this).next() is a UL?

Upvotes: 5

Views: 6202

Answers (4)

wesmat
wesmat

Reputation: 85

a bit late, but...

$('UL LI').click(function() {
  $('> ul', this).toggle();
});

Upvotes: 0

JiJ
JiJ

Reputation: 546

can it be just $(this).next("ul").slideUp()

Upvotes: 1

dclowd9901
dclowd9901

Reputation: 6836

$('LI').toggle(function() {
    $(this).children('ul').slideUp();
},
function() {
    $(this).children('ul').slideDown();
});

This is assuming that you mean the UL listed under the LI that is clicked. If you want a particular UL to collapse whenever any LI is clicked, you might have to write something with a few more checks.

Upvotes: 6

Jan Jongboom
Jan Jongboom

Reputation: 27352

if($(this).next().is("ul")) {

}

Should do the trick. See: http://api.jquery.com/is/

Upvotes: 8

Related Questions