Details and summary

Expandable disclosure widget.

A native disclosure widget. The <summary> is the always-visible trigger; the remaining children are revealed when open. Styling swaps the default triangle for a ↓/↑ marker.

Basic

<details>
  <summary>Click to expand</summary>
  <p>The quick brown fox jumps over the lazy dog.</p>
</details>

Inside a key-value item

Used on the About page to let each career role expand into a longer description. The <summary> holds the key-value row; the revealed content adds sub-headings and project links.

<li class="key-value--item key-value--with-detailssummary …">
  <details>
    <summary>
      <h3 class="key-value--key">Role title</h3>
      <div class="key-value--description">
        <p>Organisation</p>
      </div>
      <p class="key-value--value small-text secondary-text">Dates</p>
    </summary>
    <h4>About this role</h4>
    <p>Longer description revealed on open.</p>
  </details>
</li>

Collapsible navigation

Used in the sidebar on these boilerplate pages. A <details> groups a section of navigation under a clickable <summary>; the open attribute keeps the current section expanded by default.

<nav aria-label="Example navigation">
  <ul>
    <li>
      <details open>
        <summary><a href="/section/">Section</a></summary>
        <ul>
          <li><a href="/section/page/" aria-current="page">Current page</a></li>
          <li><a href="/section/other/">Other page</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

See also

Accordion — grouping multiple <details> together, including the name attribute for mutually exclusive panels.