<details> / <summary>

The <details> element creates a disclosure widget that can be opened and closed by clicking. The <summary> element specifies the visible heading label for the toggle control.

Syntax

<details>
  <summary>Click to expand</summary>
  <p>Content shown when open</p>
</details>

Attributes

Attribute	Description
open	When added to `<details>`, the content is displayed in the open state when the page loads.

Sample Code

<!-- Accordion that starts closed -->
<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the language used to describe the structure of web pages.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets. It is the language used to style the structure created with HTML.</p>
</details>

<!-- You can also include a list inside -->
<details>
  <summary>Common programming languages</summary>
  <ul>
    <li>JavaScript</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Swift</li>
  </ul>
</details>

Output

The first item appears closed (▶ What is HTML?), and the second appears open from the start (▼ What is CSS? + content). Clicking the heading toggles it open or closed.

Notes

Using <details> and <summary> together lets you build an accordion (collapsible) UI without any JavaScript. They are commonly used for FAQs, glossaries, and folding away lengthy supplementary content.

<summary> must always be the first child element of <details>. If you omit <summary>, the browser will display a default label such as "Details," so always provide one explicitly. You can also place heading elements (<h2> through <h6>) or inline elements such as <span> inside <summary>.

The open/closed state can be detected with the JavaScript toggle event, which makes it possible to lazy-load content dynamically when the widget is opened. You can also use the CSS details[open] selector to apply styles only when the element is in the open state.