7

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Kzqai
  • 22,588
  • 25
  • 105
  • 137
  • 1
    Show/hide at what event? Click, hover, ...? – Šime Vidas May 31 '11 at 14:27
  • Either click or hover would work fine, though hovering the trigger area would have to allow moving the hover to the shown area and have it still be shown, though I think that is do-able via just decreasing and increasing z-indexes on hover. Plus I'm pretty sure there isn't any kind of click trigger in css? – Kzqai May 31 '11 at 14:41
  • 2
    There actually is: http://jsfiddle.net/simevidas/pdHDH/ – Šime Vidas May 31 '11 at 15:01
  • @{Sime Vidas} Jesus, that's great, good to know. – Kzqai May 31 '11 at 15:05
  • See also [Show / hide div on click with CSS](http://stackoverflow.com/q/6019845/3075942) – user Apr 08 '15 at 00:55

4 Answers4

6

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/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
3

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; }
mlitty
  • 31
  • 1
1

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?

Victor
  • 9,210
  • 3
  • 26
  • 39
0

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;}
james6848
  • 1,657
  • 3
  • 25
  • 39
  • 1
    Just saw your edit... I'm pretty sure you'll need a solution that nests the 'show-hide-text' within the trigger as above, as that's the only way you'll be able to make use of :hover. – james6848 May 31 '11 at 14:42