Skip to main content
Note · 12:00 AM · Glasgow

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;
}

External Link Bookmark Note Entry Search