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>