Display hidden li based on class

css, jquery

Solution

You can show the active's parents using `.parents()` or `:has()` when the page loads like this:

$(function() {
  $('.active').parents().show();​​​​​​​​​
  //or..
  $(':has(.active)').show();​​​​​​​​​
});

Either of these work any number of levels deep, the first would be a bit faster though.

Problem

I have the following list structure: ``` <ul> <li>One</li> <li>Two <ul> <li class="active">Two-1</li> <li>Two-2</li> </ul> </li> <li>Three <ul> <li>Three-1</li> </ul> </li> </ul> ``` with the following CSS: ``` ul li ul{ display:none; } ul li:hover ul{ display:block; } ``` What I would like is this: When an li class is active, the entire structure down until the active class gets displayed. so in the case provided the following would show, along with the top level: - One - Two - Two-1 - Two-2 - Three I'd like either a CSS or jQuery implementation (or mixture of the two) if possible.

Original source