`accordion` overview

Use the native <details> and <summary> HTML elements to build accordions. No JavaScript is required — the browser handles expand and collapse natively.

Key points

No custom classes needed for the basic pattern — the browser styles it by default
Add the open attribute to expand a section on page load
For an accordion styled as an info banner with a chevron icon, use the details.alert variant — see the Alerts page

Props

Element / attribute	Description
`<details>`	Wrapper element — contains the summary and the hidden content
`<summary>`	The visible trigger — always shown, clicked to expand or collapse
`open`	Boolean attribute on `<details>` — present when expanded, absent when collapsed

Example

          
<details>
  <summary>What happens after I book?</summary>
  <p>You will receive a confirmation letter within 5 working days.</p>
</details>

This will produce the following:

What happens after I book?

You will receive a confirmation letter within 5 working days. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Open by default

Add the open attribute to expand the section on page load.

          
<details open>
  <summary>Associated letters</summary>
  <ul>
    <li>Outpatient letter — 12 June 2025</li>
    <li>Referral letter — 3 March 2025</li>
  </ul>
</details>

This will produce the following:

Associated letters

Outpatient letter — 12 June 2025
Referral letter — 3 March 2025

Alert disclosure variant

Combine <details> with the alert classes for a styled disclosure banner with an icon and animated chevron. Full documentation and markup is on the Alerts page.

What if my letter does not automatically open?