HTML & CSS reference

<details>, <summary>

A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.

Syntax

<details>
  <summary>Title</summary>
  Hidden content
</details>

Attributes

Parameter	Type	Description
open	—	Optional. The block is open initially.
name	text	Optional. Blocks with the same `name` form an accordion: only one is open.

Examples

A question and an answer:

<details>
  <summary>Do you have oat milk?</summary>
  <p>Yes, and soy and almond milk too.</p>
</details>

An accordion — only one block is open:

<details name="faq" open>
  <summary>Opening hours</summary>
  <p>Daily from 8 am to 9 pm.</p>
</details>
<details name="faq">
  <summary>Delivery</summary>
  <p>Free for orders over $20.</p>
</details>

A custom marker instead of the triangle:

<style>
  summary { list-style: none; cursor: pointer; }
  summary::before { content: "+ "; }
  details[open] summary::before { content: "− "; }
</style>
 
<details>
  <summary>Ingredients</summary>
  <p>Espresso, milk, cinnamon.</p>
</details>

Notes

<summary> must be the first element inside <details>. The name attribute for accordions has been supported by all modern browsers since 2024. Find-in-page (Ctrl + F) finds the hidden text and opens the block.

Related recipes

In the tutorial

Disclosure widgets and dialogs — The details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.

Thanks for reading!