What is the simplest way to implement pure css show/hide?

Question

I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.

I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).

However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.

Trivial example code that I would like to be able to apply a show/hide to:

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

And yes, I do know that jQuery exists.

Answer 1

there is a plethora of options based on the structure (for modern browsers).

Have a look at the

1. selector + selector  adjacent sibling selector
2. selector ~ selector  general sibling selector
3. selector selector      descendant selector
4. selector > selector  child selector

These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.

here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/

Answer 2

Try this using nested divs and targets. I'm not a CSS guru, so there may be all kinds of flaws with this, but it seems to work.

http://jsfiddle.net/NmdxC/6/

#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }

Answer 3

CSS without the exact code is hard to visualize, but what is wrong with changing the display or visibility declarations dangling from a :hover?

a #myelement{display:none;}
a:hover #myelement{display:block;}

I problably misunderstood the question...care to add code?

Answer 4

First thing that springs to mind is something like:

<a class="blah" href="#">Hello<span>Test</span></a>


a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}