The details tag is used to create collapsible sections of content that the user can open or close. It is often paired with the summary tag, which defines the clickable heading or label.
It’s perfect for:
- FAQs
- Hidden notes
- Advanced settings
- Progressive disclosure of content
✅ Basic Syntax
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language. It structures content on the web.</p>
</details>
📍 Result in browser:
- The user sees “What is HTML?” as a clickable label.
- Clicking it expands the section to reveal the paragraph.
🧩 Features
| Feature | Description |
|---|---|
| Interactive | Expand/collapse without JavaScript |
| Accessible | Built-in keyboard and screen reader support |
| Semantic | Describes collapsible info meaningfully |
| Default State | Closed unless you add open attribute |
▶️ Open by Default
Add the open attribute to make it expanded when the page loads:
<details open>
<summary>Default Open</summary>
<p>This section starts expanded.</p>
</details>
🎨 Styling Example
<style>
details {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
}
summary {
font-weight: bold;
cursor: pointer;
}
details[open] {
background-color: #f9f9f9;
}
</style>
🧠 Advanced Use: Nesting
You can nest <details> for hierarchical FAQs:
<details>
<summary>Web Technologies</summary>
<details>
<summary>HTML</summary>
<p>Used for structure.</p>
</details>
<details>
<summary>CSS</summary>
<p>Used for styling.</p>
</details>
</details>
✅ Summary
| Tag | <details> |
|---|---|
| Purpose | Expandable/collapsible content |
| Works with | <summary> (for clickable label) |
| Default | Closed unless open is added |
| JavaScript? | ❌ Not needed for basic behavior |