Accordion

The accordion pattern uses the native HTML <details> and <summary> elements. No JavaScript is required. Clicking the summary toggles the body open or closed. Multiple accordions can coexist on the same page independently.

Do not add role="button" to <summary> — it already carries that implicit ARIA role and the redundant attribute can confuse assistive technologies.

Simple accordion

Place any content inside <details>. The <summary> acts as the clickable header.

Who is Sarah Connor?

Sarah Jeanette Connor is a fictional character and the main protagonist of the Terminator franchise, portrayed by Linda Hamilton.

I have keys but no doors. What am I?

A keyboard.

<details>
    <summary>Question</summary>
    <p>Answer</p>
</details>

Accordion with action button

A <button> placed inside <summary> floats to the right automatically. The body can contain any semantic structure — <header>, <main>, <footer>.

Summary text.

Header inside details.

Content in the main part of the details element.

<details>
    <summary>
        Summary text.
        <button>action</button>
    </summary>
    <header>...</header>
    <main><p>Content</p></main>
    <footer>...</footer>
</details>