Skip to main content

Details and summary for no-JavaScript disclosure widgets

The fairly-recently added <details> element is a great, native HTML way to toggle content visibility.

<p>Lorem ipsum dolor sit amet.</p>

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

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


button {
font-size: inherit;

.end {
margin-top: 2rem;

External Link Bookmark Note Entry Search