Learn how to create native disclosure widgets with the details and summary elements — collapsible content without any JavaScript.
The <details> element creates a disclosure widget — a piece of content the user can show or hide by clicking. The <summary> element provides the visible label.
<details>
<summary>Click to expand</summary>
<p>This content is hidden until the user clicks the summary.</p>
</details>By default, the content is collapsed. When the user clicks the summary, the browser toggles the open attribute on the <details> element.
No JavaScript required — this is entirely native HTML behaviour.
Add the open attribute to show the content by default:
<details open>
<summary>Already expanded</summary>
<p>This content is visible on page load.</p>
</details>You can listen for the toggle event in JavaScript to react when the user opens or closes the widget:
details.addEventListener('toggle', () => {
console.log(details.open ? 'Opened' : 'Closed');
});<summary>If you omit <summary>, the browser generates a default label (usually "Details"). Always provide a meaningful summary.
<section>
<h2>FAQ</h2>
<details>
<summary>How do I create an account?</summary>
<p>Click the Sign Up button in the top right corner.</p>
</details>
<details>
<summary>Can I change my username?</summary>
<p>Yes, go to Settings > Profile > Username.</p>
</details>
</section>You can nest <details> elements for multi-level disclosure:
<details>
<summary>Advanced settings</summary>
<details>
<summary>Network</summary>
<p>Configure proxy and DNS settings here.</p>
</details>
<details>
<summary>Privacy</summary>
<p>Manage cookies and tracking preferences.</p>
</details>
</details><summary> element is focusable and activatable with keyboard (Enter/Space).<h2>Frequently Asked Questions</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard language
for creating and structuring web page content.</p>
</details>
<details>
<summary>Do I need to know CSS to learn HTML?</summary>
<p>No. HTML handles structure, CSS handles presentation.
You can learn HTML first and add CSS later.</p>
</details>
<details open>
<summary>Is this content expanded by default?</summary>
<p>Yes! The <code>open</code> attribute makes this
details element start in the expanded state.</p>
</details>What happens when you add the `open` attribute to a <details> element?