How to only show a nested UL and hide its parent? - html

Question

I'm trying to show a nested (sub) list, but hide the parent ULs and LIs through an "active" class so that the sub list looks like the parent list.
The list with the "active" class isn't visible because it inherits display: none from its parent.
Code:
<ul>
<li>
Hidden
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
CSS:
li {
display: none;
}
li.active {
display: block;
}
Fiddle: http://jsfiddle.net/2C8qs
Any ideas?

Answer 1

If you can add span around the hidden text (http://jsfiddle.net/vittore/2C8qs/3/) :
<ul>
<li>
<span>Hidden</span>
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
li span, li li {
display: none;
}
li li.active {
display: block;
}

Answer 2

display: none hides the element and all of its children, that is final and adding display: block to a child won't make it visible again.
This will hide all children, except for the .active element:
ul.parent > li {
display: none;
}
ul.parent > li.active {
display: block;
}
EDIT: Oops, I misread the question. You can do something similar to the above though, if you wrap the other contents in an element.

Answer 3

An ugly CSS trick : http://jsfiddle.net/2C8qs/4/
Instead of using display none/block, I used text-indent, like that :
li {
text-indent: -99999em
}
li.active {
text-indent: 0
}
Note that can only work on inline / text elements.

Answer 4

I know this is very late to this question, but I've found what I would consider a nice solution and thought I'd post it here for whoever might need it in the future.
First of all, wrap all the <li>'s children with <p> (or <div> or anything, it doesn't matter really), but not any sub-<ul>'s. Then, to the child <ul> you want to be visible, add a class called showing. Example (we only want to show the SubSubThing list):
<ul>
<li>
<p>Item</p>
<ul>
<li>
<p>SubItem</p>
<ul>
<li>
<p>SubSubItem</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Thing</p>
<ul>
<li>
<p>SubThing</p>
<ul class="showing">
<li>
<p>SubSubThing1</p>
</li>
<li>
<p>SubSubThing2</p>
</li>
<li>
<p>SubSubThing3</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Then apply this CSS:
ul>li {
list-style:none;
}
ul>li>p {
display: none;
}
ul.showing>li>p {
display:block;
}
/* Without removing padding and margin,
the sublists appear way over to the right */
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 0px;
padding-left: 0px;
}
Now, only the <li>'s who are direct descendants of ul's with a showing class will display at all. The other items in the list will use no space.
To get the sublists to show bullet points would be easy via CSS, and to show different sublists it is simple to just use jQuery to set showing on the appropriate ul.
Hope that helps.
Obligatory JSFiddle

Answer 5

So the reason you can't simply hide the first li and reveal the second is because the second is contained by the first — you can't reveal and element that is contained by a hidden one.
Therefore, if you put the li element within a span that you'd like to hide, it becomes easy. I've created a class-free version for you here: http://jsfiddle.net/rgpnr6mh/3/
<ul>
<li><span>Hidden</span>
<ul>
<li>Visible</li>
</ul>
</li>
</ul>
I'm assuming you don't want to display the bullets:
ul {
list-style-type:none
}
li span{
display: none;
}
li li {
display: block;
}