Details and Summary
Create an expandable, collapsible section.
Syntax
<details><summary>More</summary>Hidden text</details>The <details> element creates a widget the user can open and close. The <summary> element provides the visible label that toggles it.
This is perfect for FAQs and hiding extra information — with no JavaScript required.
Example
Loading editor…
Press Run to see the result.
When to use it
- An FAQ page uses <details> for each question so users can expand only the answers they want to read.
- A documentation page wraps long code examples in <details> to keep the page compact with an expandable "Show code" toggle.
- A settings panel uses <details> to hide advanced configuration options until a user explicitly opens that section.
More examples
Basic expandable FAQ item
<summary> is the always-visible toggle label; clicking it shows or hides the rest of the <details> content.
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard language
for creating and structuring web pages.</p>
</details>Details open by default
The open attribute makes the <details> expanded by default when the page loads.
<details open>
<summary>Quick Reference</summary>
<ul>
<li><code><h1></code> — Main heading</li>
<li><code><p></code> — Paragraph</li>
<li><code><a></code> — Anchor link</li>
</ul>
</details>Nested details for grouped settings
Nesting <details> creates a multi-level accordion for complex settings without any JavaScript.
<details>
<summary>Advanced Settings</summary>
<details>
<summary>Performance</summary>
<label><input type="checkbox" name="lazy"> Enable lazy loading</label>
</details>
<details>
<summary>Privacy</summary>
<label><input type="checkbox" name="track"> Allow analytics</label>
</details>
</details>
Discussion