Can text be hidden and shown using just CSS (no JavaScript code)? [closed]

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, since it’s harder to build in the closing mechanism.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}
<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Leave a Comment