details and summary: Expandable Content Without JavaScript

details makes content that the visitor can expand and collapse, with no JavaScript. summary is the part that is always visible.

1
2
3
4
5
6
7
8
9

<details>
  <summary>What are your opening hours?</summary>
  <p>Every day from nine to six, except public holidays.</p>
</details>

<details open>
  <summary>Do you buy used books?</summary>
  <p>Yes. Bring them to the counter and we will take a look.</p>
</details>

How it works

• Clicking or pressing Enter on the summary toggles the content.
• The open attribute makes it start open.
• It works with the keyboard, and screen readers announce expanded or collapsed.

Good uses

• FAQ lists.
• Optional extra information, such as technical details.
• The solution to an exercise, like the ones in this course.

Several that behave like an accordion

Give details elements the same name to allow only one to be open at a time in modern browsers.

1
2

<details name="faq"><summary>First</summary><p>...</p></details>
<details name="faq"><summary>Second</summary><p>...</p></details>