Related sections with native expansion and consistent spacing.
Single open
Opening one answer closes the previous answer. Click the open summary again to collapse everything. Use a unique name for each group.
What do I need to get started?
Plain HTML and CSS. No packages or build step required.
Can I customize the design?
Use shared tokens for colors, spacing, and motion.
Does it work without JavaScript?
Yes. The browser manages expansion and keyboard interaction.
View Code
HTML
<div class="accordion">
<details name="getting-started" open>
<summary>
What do I need to get started?
</summary>
<p>
Plain HTML and CSS. No packages or build step required.
</p>
</details>
<details name="getting-started">
<summary>
Can I customize the design?
</summary>
<p>
Use shared tokens for colors, spacing, and motion.
</p>
</details>
<details name="getting-started">
<summary>
Does it work without JavaScript?
</summary>
<p>
Yes. The browser manages expansion and keyboard interaction.
</p>
</details>
</div>
Plus and cross
Add accordion-plus to rotate a plus into a cross when open. The 300ms transition follows motion preferences.
What do I need to get started?
Plain HTML and CSS. No packages or build step required.
Can I customize the design?
Use shared tokens for colors, spacing, and motion.
Does it work without JavaScript?
Yes. The browser manages expansion and keyboard interaction.
View Code
HTML
<div class="accordion accordion-plus">
<details name="plus-setup" open>
<summary>
What do I need to get started?
</summary>
<p>
Plain HTML and CSS. No packages or build step required.
</p>
</details>
<details name="plus-setup">
<summary>
Can I customize the design?
</summary>
<p>
Use shared tokens for colors, spacing, and motion.
</p>
</details>
<details name="plus-setup">
<summary>
Does it work without JavaScript?
</summary>
<p>
Yes. The browser manages expansion and keyboard interaction.
</p>
</details>
</div>
Multiple open
Omit name when people need to compare several answers. Each item opens independently.
What do I need to get started?
Plain HTML and CSS. No packages or build step required.
Can I customize the design?
Use shared tokens for colors, spacing, and motion.
Does it work without JavaScript?
Yes. The browser manages expansion and keyboard interaction.
View Code
HTML
<div class="accordion">
<details open>
<summary>
What do I need to get started?
</summary>
<p>
Plain HTML and CSS. No packages or build step required.
</p>
</details>
<details>
<summary>
Can I customize the design?
</summary>
<p>
Use shared tokens for colors, spacing, and motion.
</p>
</details>
<details>
<summary>
Does it work without JavaScript?
</summary>
<p>
Yes. The browser manages expansion and keyboard interaction.
</p>
</details>
</div>
Bordered
A contained surface using the same spacing, palette, and corner tokens.
What do I need to get started?
Plain HTML and CSS. No packages or build step required.
Can I customize the design?
Use shared tokens for colors, spacing, and motion.
Does it work without JavaScript?
Yes. The browser manages expansion and keyboard interaction.
View Code
HTML
<div class="accordion accordion-bordered">
<details name="bordered-setup" open>
<summary>
What do I need to get started?
</summary>
<p>
Plain HTML and CSS. No packages or build step required.
</p>
</details>
<details name="bordered-setup">
<summary>
Can I customize the design?
</summary>
<p>
Use shared tokens for colors, spacing, and motion.
</p>
</details>
<details name="bordered-setup">
<summary>
Does it work without JavaScript?
</summary>
<p>
Yes. The browser manages expansion and keyboard interaction.
</p>
</details>
</div>
Rich content
Keep links and controls in the body. Closed bodies leave the keyboard tab order.
How should I prepare my project?
Describe your audience and the task they need to complete.
Check keyboard access, responsive layouts, and both themes before publishing.
What happens after export?
Your application owns data, authentication, and deployment.
View Code
HTML
<div class="accordion">
<details open>
<summary>
How should I prepare my project?
</summary>
<div class="disclosure-content stack">
<p>
Describe your audience and the task they need to complete.
</p>
<a href="/docs/ai">
Read the AI Guide
</a>
<p>
Check keyboard access, responsive layouts, and both themes before publishing.
</p>
</div>
</details>
<details>
<summary>
What happens after export?
</summary>
<p>
Your application owns data, authentication, and deployment.
</p>
</details>
</div>
Long labels
Labels wrap naturally. Content determines height; controls and text keep their readable size.
Can our team customize the colors, spacing, and typography while keeping every page consistent?
Yes. Change shared tokens and use the same component conventions throughout the project.
View Code
HTML
<div class="accordion">
<details>
<summary>
Can our team customize the colors, spacing, and typography while keeping every page consistent?
</summary>
<p>
Yes. Change shared tokens and use the same component conventions throughout the project.
</p>
</details>
</div>
Right-to-left
Use dir and lang for the content. Logical spacing places the chevron at the reading end.
איך מתחילים?
בחרו את הרכיבים הדרושים והתחילו עם עמוד פשוט.
אפשר להתאים את הצבעים?
כן, השתמשו במשתני הצבע המשותפים.
View Code
HTML
<div class="accordion" dir="rtl" lang="he">
<details name="hebrew-setup" open>
<summary>
איך מתחילים?
</summary>
<p>
בחרו את הרכיבים הדרושים והתחילו עם עמוד פשוט.
</p>
</details>
<details name="hebrew-setup">
<summary>
אפשר להתאים את הצבעים?
</summary>
<p>
כן, השתמשו במשתני הצבע המשותפים.
</p>
</details>
</div>
Without motion
Reduced-motion preferences disable animation automatically. Use data-motion=none to opt out for a particular group.
What do I need to get started?
Plain HTML and CSS. No packages or build step required.
Can I customize the design?
Use shared tokens for colors, spacing, and motion.
Does it work without JavaScript?
Yes. The browser manages expansion and keyboard interaction.
View Code
HTML
<div class="accordion" data-motion="none">
<details open>
<summary>
What do I need to get started?
</summary>
<p>
Plain HTML and CSS. No packages or build step required.
</p>
</details>
<details>
<summary>
Can I customize the design?
</summary>
<p>
Use shared tokens for colors, spacing, and motion.
</p>
</details>
<details>
<summary>
Does it work without JavaScript?
</summary>
<p>
Yes. The browser manages expansion and keyboard interaction.
</p>
</details>
</div>
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.