The details and summary Tags

The details tag is the browser built-in accordion. Wrap any content inside it and that content stays hidden until someone clicks. The click handling, the open and close state, even the little triangle marker, all come from the browser. You write zero JavaScript.

Every details box needs a summary tag as its first child. That summary is the visible label people click. Everything after it, paragraphs, lists, forms, images, stays collapsed until the summary is clicked. The pairing is required: a details box with no summary still works, but there is nothing to click, so the content stays stuck closed.

This tag exists because expand and collapse is one of the most common UI patterns on the web, and for years every site reimplemented it with JavaScript and CSS classes. Details gives you the same result with cleaner markup, and it works in every modern browser. In older browsers the content simply shows, so nothing is ever lost.

The open attribute

You can force a details box to start open by adding the open attribute. This is handy for the first question in an FAQ or for a section you want visible on page load. Without it, the box starts closed. The open attribute is just a state flag, so you can also remove it from JavaScript to close the box programmatically.

<details open>
  <summary>Already open</summary>
  <p>This is visible without a click.</p>
</details>

Grouping into a true accordion

In modern browsers, giving several details elements the same name attribute groups them: opening one closes the others. That is real accordion behavior with no script. Before this landed, sites used JavaScript to enforce the one-open-at-a-time rule.

<details name="faq">
  <summary>Question one</summary>
  <p>Answer one.</p>
</details>
<details name="faq">
  <summary>Question two</summary>
  <p>Answer two.</p>
</details>

Real world uses

FAQs are the most common use, but details works for mobile navigation menus, terms of service boxes, and tutorial answers. The triangle marker is a ::marker pseudo element, so you can restyle it with CSS. To animate the opening, pair details with the CSS transition on the inner content.

Syntax

<details>
  <summary>Click me</summary>
  <p>Hidden content appears here.</p>
</details>

<details><summary>Shipping costs</summary><p>Free over $50</p></details> // never bare <details>