Details and Summary, Leveled Up
Build accordions, toggles, and disclosure widgets with zero JavaScript.
You met <details> earlier as a simple show/hide box. Here's how seniors squeeze real UI out of it.
Exclusive accordions with name
Give several <details> elements the same name attribute and they behave like radio buttons: opening one closes the others. That's a full accordion with no script at all — a genuinely modern addition to the platform.
<details name="faq"><summary>Q1</summary>...</details>
<details name="faq"><summary>Q2</summary>...</details>Listening for state
The element fires a toggle event whenever it opens or closes, so you can lazy-load content the moment a section expands. And because the open state lives in the open attribute, you can style the two states purely with CSS.
Where it shines
- FAQs and help sections.
- Progressive disclosure of advanced settings.
- Collapsible sidebars and nav trees.
Example
When to use it
- A documentation site uses styled <details> components with custom marker icons to replace a JavaScript accordion library.
- A FAQ section uses name attributes on multiple <details> elements to create an exclusive accordion where only one opens at a time.
- A changelog page nests <details> inside each version section so users expand only the release notes they care about.
More examples
Exclusive accordion using name attribute
Sharing the same name attribute makes the browser close other open <details> in the group automatically.
<details name="faq">
<summary>What is HTML?</summary>
<p>HTML is the markup language that structures web pages.</p>
</details>
<details name="faq">
<summary>What is CSS?</summary>
<p>CSS controls the visual presentation of HTML elements.</p>
</details>
<details name="faq">
<summary>What is JavaScript?</summary>
<p>JavaScript adds interactivity and dynamic behavior to web pages.</p>
</details>Custom styled summary with CSS
CSS on summary and details[open] creates custom styled accordions without JavaScript toggle logic.
<style>
details summary {
cursor: pointer;
font-weight: bold;
padding: 8px 12px;
background: #f0f4ff;
border-radius: 4px;
list-style: none;
}
details[open] summary {
background: #dce7ff;
}
</style>
<details>
<summary>Installation steps</summary>
<ol>
<li>Install Node.js</li>
<li>Run npm install</li>
<li>Start with npm start</li>
</ol>
</details>Details with toggle event listener
The toggle event fires when <details> opens or closes, enabling lazy-loaded content on first expand.
<details id="lazy-section">
<summary>Load comments</summary>
<div id="comments-container">
<p>Loading...</p>
</div>
</details>
<script>
const section = document.getElementById("lazy-section");
let loaded = false;
section.addEventListener("toggle", () => {
if (section.open && !loaded) {
loaded = true;
fetch("/api/comments")
.then(r => r.json())
.then(data => {
document.getElementById("comments-container")
.textContent = `${data.length} comments loaded.`;
});
}
});
</script>
Discussion