Can text be hidden and shown using just CSS (no javascript)?

  • A+

Is it possible to show and hide text using a link with only CSS -- without using javascript at all?

For example: On this page

Note the "More" link. When you click it, it unhides text. This particular example is Javascript, but not sure if it can be done with pure css.


There’s the <details> element, which isn’t yet built into Edge:

<details>   <summary>more <!-- a bad summary --></summary>   <p>Some content</p> </details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content {   display: none; }
<input id="more" type="checkbox" /> <label for="more">more</label>  <p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate.


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: