how to display a child without the rest of the list showing

[Wayder]

Hi,

I’m trying to display a child without the rest of the list showing. I don’t think I “get it”, any solutions please?


#list{
display:none;
}
#list li #show1{
display:block;
}

<ul id="list">
<li>one
<ul id="show1">
<li>show1 one</li>
<li>show1 two</li>
<li>show1 three</li>
</ul>
</li>
<li>two
<ul id="show2">
<li>show2 one</li>
<li>show2 two</li>
<li>show2 three</li>
</ul>
</li>
</ul>

[DrDoc]

Ah! I ran into similar problems in my CSS infancy, so I understand why it may not make sense currently. Unfortunately, what you are trying to do cannot be done (as written).

First -- let me explain how the

display

property works. Each element is like a cardboard box. You are asking for the outer box (#list) to be closed, but an inner box (#show1) to be open. The browser actually does exactly what you ask it to do, but since the outer box is closed, you still cannot see the contents of the inner open box.

Now, there are certainly ways around this -- or, rather -- there are ways to visually achieve what you are trying to do, but the path there is a bit more round-about. Before going there, however -- I assume this is for a menu or something? Are you setting the

display

property dynamically (using JavaScript) or is it hard coded in the stylesheet?

[lucy24]

I happened to be reading this bit of the CSS spec just a few days ago, so let me give the Horse's Mouth version.

http://www.w3.org/TR/CSS2/visuren.html#propdef-display (auto-linking intentionally disabled)

emphasis mine:

none
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

That's the 2.1 wording; 3 is almost identical.

[Paul_o_b]

This is unlikely to be what you need but you can do what you ask using 'visibility' instead of display and unlike display:none you can reveal children even if the parent is hidden.

e.g.

#list { visibility:hidden; }
#list li #show1 { visibility:visible; }

Of course visibility does not remove the element from the flow but just makes it invisible which often is not much use. You can use it in combination with absolute positioning to remove it from the flow but however (as mentioned above) it looks like you are trying to make a dropdown menu and there are better ways to do this.

[Wayder]

Thanks for the replies.

That’s an excellent analogy DrDoc and really helps my understanding. Thank you.

This is a menu. The css is hard coded and already set up for the desktop version. I am trying to code for small mobile devices (480px) without making too many changes in the html. This is mainly because I don’t want to recode the whole site from scratch because a lot of the html is php generated.

Actually, visibility:hidden; may be what I need because I already plan to absolutely position the child element, unless I get other suggestions of course.

Any additional help/suggestions would be appreciated.

Thank you

[DrDoc]

visibility: hidden

is a perfectly viable option, and appears to also be the best option in this case.

Your other options would involve heavy scripting to hide/show surrounding elements, or to traverse the tree to figure out what should be hidden/visible.

If it works and does what you need it to do,

visibility: hidden

is by far the cleanest and easiest to read solution I would be able to think of.

[Wayder]

Thank you all, that is exactly what I was looking for. I have hidden the whole menu, made it height:0; so it takes up no space and made the child visible when targeted.

#list{
visibility:hidden;
height:0;
}
#show1:target{
visibility:visible;
/*Position, colour and size as required;*/
}
#show2:target{
visibility:visible;
/*Position, colour and size as required;*/
}

<ul id="list">
<li>one
<ul id="show1">
<li>show1 one</li>
<li>show1 two</li>
<li>show1 three</li>
</ul>
</li>
<li>two
<ul id="show2">
<li>show2 one</li>
<li>show2 two</li>
<li>show2 three</li>
</ul>
</li>
</ul>

[swa66]

You could do it with display:none just as well.

All you need to do is not select the parent, but select all equal level children (with a "*" in the right spot) and then use specificity to display one of them anyway.

e.g.:

#list>* { 
 display:none; 
} 
#list>#show1{ 
 display:block; 
} 

 <ul id="list"> 
  <li id="show1">one 
   <ul> 
    <li>show1 one</li> 
    <li>show1 two</li> 
    <li>show1 three</li> 
   </ul> 
  </li> 
  <li id="show2">two 
   <ul> 
    <li>show2 one</li> 
    <li>show2 two</li> 
    <li>show2 three</li> 
   </ul> 
  </li> 
 </ul>

[Wayder]

Hi swa66,

Thanks for your suggestion but that didn't work for me.

visibility:hidden worked the best.

Thanks