Tab to the summary, then press Enter or Space. The browser manages the expanded state without JavaScript.
Can I use only this component?
Yes. Include the shared base and this component’s CSS. No JavaScript is needed.
View Code
HTML
<details>
<summary>
Can I use only this component?
</summary>
<p>
Yes. Include the shared base and this component’s CSS. No JavaScript is needed.
</p>
</details>
Initially open
Add the boolean open attribute to reveal content on arrival. Omit it to start closed; open="false" still means open.
What is included?
Semantic HTML, shared design tokens, and only the component styles you choose.
View Code
HTML
<details open>
<summary>
What is included?
</summary>
<p>
Semantic HTML, shared design tokens, and only the component styles you choose.
</p>
</details>
Rich content
Use disclosure-content with stack for consistent body spacing. Keep links and other controls inside the body, outside the summary.
How do I get started?
Choose the components your project needs, then build on their documented markup.
Use the local preview to check keyboard access, themes, and narrow layouts.
View Code
HTML
<details open>
<summary>
How do I get started?
</summary>
<div class="disclosure-content stack">
<p>
Choose the components your project needs, then build on their documented markup.
</p>
<a href="/docs/ai">
Read the AI Guide
</a>
<p>
Use the local preview to check keyboard access, themes, and narrow layouts.
</p>
</div>
</details>
Related questions
Independent disclosures allow several answers to stay open. Give a group the same name only when one-at-a-time behavior is useful; use a unique name per group. Older browsers may allow multiple open items.
Do I need a build tool?
No. Serve the HTML and CSS directly.
Can I add my own behavior?
Yes. Use the native open property and toggle event when application behavior needs them.
View Code
HTML
<div>
<details name="setup">
<summary>
Do I need a build tool?
</summary>
<p>
No. Serve the HTML and CSS directly.
</p>
</details>
<details name="setup">
<summary>
Can I add my own behavior?
</summary>
<p>
Yes. Use the native open property and toggle event when application behavior needs them.
</p>
</details>
</div>
Long labels
The summary wraps while the chevron keeps its size. Content stays selectable and heights remain content-driven.
Can I customize this component for a multilingual project?
Yes. Even long references wrap: documentation_workspace_configuration_2026.
View Code
HTML
<details open style="max-inline-size:18rem">
<summary>
Can I customize this component for a multilingual project?
</summary>
<p>
Yes. Even long references wrap: documentation_workspace_configuration_2026.
</p>
</details>
Right-to-left
Set the language and direction. Spacing follows the reading direction and the chevron keeps its open/closed meaning.
האם צריך JavaScript?
לא, הרכיב משתמש ברכיבי HTML מובנים.
View Code
HTML
<details open dir="rtl" lang="he">
<summary>
האם צריך JavaScript?
</summary>
<p>
לא, הרכיב משתמש ברכיבי HTML מובנים.
</p>
</details>
Without motion
The default uses shared 300ms motion. Reduced-motion preferences and data-motion=none make changes immediate. Height animation is progressive; unsupported browsers still expand normally.
Can I turn off the animation?
Yes. The content and keyboard behavior remain the same.
View Code
HTML
<details data-motion="none">
<summary>
Can I turn off the animation?
</summary>
<p>
Yes. The content and keyboard behavior remain the same.
</p>
</details>
Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.