CODEWITHSUNDEEP
javascriptjqueryhtml
TheRealPapa
TheRealPapa

Reputation: 4539

jQuery target next `ul` element from `li` with class `active`

Cannot figure what I am doing wrong, as I get no errors. Essentially I want to target the very next ul element from the one and only li containing a class of active.

My HTML is:

<li id="abc"></li>
<li id="account" class="active">
  <a href="#"><img class="menu-logo-symbol" src=" /img/app/logo-symbol.png">Your Account</a>
  <ul class="nav-pills nav-stacked sub-nav nav-list" style="display: none;">
    <li id="account-details"></li>
    ......
  </ul>
</li>

I have tried the following:

var checkElement = $('li.active').next('ul');
checkElement.slideDown('normal');

and

$('li.active').next('ul').show();

and also

$('li.active').next('ul').slideDown('normal');

Thanks

Upvotes: 1

Views: 1198

Answers (2)

jmcgriz
jmcgriz

Reputation: 3358

In jQuery, next() and prev() find siblings, or elements at the same depth in the DOM. In this case, since the ul is a child element of .active, you'd actually need to use the find() method like so: $('li.active').find('ul').first().show();

Using first() in combination with find() ensures that it'll only return that single ul element and not any others that may be nested deeper.

Upvotes: 1

TheRealPapa
TheRealPapa

Reputation: 4539

Done as follows:

$('.active ul:first').slideDown('normal');

I still do not understand why this did not work

$('li.active').next('ul').show();

Upvotes: 0

Related Questions