Welcome to WebmasterWorld Guest from 54.227.110.209

Forum Moderators: not2easy

Message Too Old, No Replies

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

     

Wayder

8:53 pm on Jul 23, 2013 (gmt 0)

10+ Year Member



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

9:04 pm on Jul 23, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

10:30 pm on Jul 23, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

11:15 am on Jul 24, 2013 (gmt 0)

10+ Year Member



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

5:53 pm on Jul 24, 2013 (gmt 0)

10+ Year Member



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

6:34 pm on Jul 24, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

7:07 pm on Jul 24, 2013 (gmt 0)

10+ Year Member



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

7:25 pm on Jul 24, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

8:40 pm on Jul 24, 2013 (gmt 0)

10+ Year Member



Hi swa66,

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

visibility:hidden worked the best.

Thanks
 

Featured Threads

Hot Threads This Week

Hot Threads This Month