HTML <details> Tag – Expandable Content
📌 Introduction
The <details> tag is used to create expandable/collapsible content.
Users can click it to show or hide extra information.
It is commonly used in:
- FAQs
- Hidden answers
- Extra explanations
- UI sections like “Read more”
🧱 Syntax
<details>
<summary>Click to open</summary>
Hidden content here
</details>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Details Example</title>
</head>
<body>
<h2>FAQ Section</h2>
<details>
<summary>What is HTML?</summary>
HTML is the structure of web pages.
</details>
<details>
<summary>What is CSS?</summary>
CSS is used to style web pages.
</details>
<details>
<summary>What is JavaScript?</summary>
JavaScript adds interactivity to websites.
</details>
</body>
</html>
🖥️ Output Explanation
- Only the
<summary>is visible at first - Clicking it reveals hidden content
- Each
<details>block works independently
🎯 Important Element
<summary>
<summary>Click me</summary>
✔ This is the visible clickable title
✔ Required inside <details>
🧠 Why <details> is Important
1. 📦 Saves Space
Keeps pages clean and organized.
2. ⚡ No JavaScript Needed
Works natively in HTML.
3. 📱 Great UX
Perfect for mobile-friendly pages.
🧩 Example (FAQ Page)
<details>
<summary>How do I learn HTML?</summary>
Practice daily and build small projects.
</details>
🎨 Styling Example
<details style="padding:10px;">
<summary>More Info</summary>
Hidden text here
</details>
⚖️ <details> vs JavaScript Toggle
| Feature | <details> |
JS Toggle |
|---|---|---|
| Easy to use | ✔ | ❌ |
| Requires JS | ❌ | ✔ |
| Built-in | ✔ | ❌ |
🚫 Common Mistakes
- Missing
<summary>❌ - Putting too much content inside summary ❌
- Using it for complex UI logic ❌
🧪 Mini Exercise
Create an FAQ page with:
- At least 3
<details>blocks - Each with a
<summary>question - Different answers
- Style spacing between them