Display hidden li based on class
- by kylex
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.
