The fairly-recently added <details> element is a great, native HTML way to toggle content visibility.
<p>Lorem ipsum dolor sit amet.</p><details>
<summary>System Requirements</summary>
<p>Requires a computer running an operating system. The computer
must have some memory and ideally some kind of long-term storage.</p>
</details><p class="end">Remember: built-in beats bolt-on, bigly!</p>
<!--
<details> is great but there are a few gotchas:
- Not totally flexible design-wise
- Unsuitable for accordions with multiple sibling elements unless you add some JS
- Unsupported in IE 11 (but content is still available)
-->
:root {
font-size: 110%;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
input,
button {
font-size: inherit;
}
.end {
margin-top: 2rem;
}