What is Details & Summary?
Creates a "click to expand" section. No JavaScript needed at all!
Basic example:
1<details>
2 <summary>Click here to see the answer</summary>
3 <p>This is the hidden content that appears when you click!</p>
4</details>How it works:
User sees only the summary text
When they click, the hidden content expands
Click again, it collapses
Open by default:
1<details open>
2 <summary>This section is already open</summary>
3 <p>Because I added the "open" attribute, this is visible from the start</p>
4</details>FAQ section example:
1<details>
2 <summary>What is HTML?</summary>
3 <p>HTML is the standard markup language for creating web pages. It stands for HyperText Markup Language.</p>
4</details>
5
6<details>
7 <summary>What is CSS?</summary>
8 <p>CSS is used to style HTML elements and make them look beautiful. It stands for Cascading Style Sheets.</p>
9</details>
10
11<details>
12 <summary>What is JavaScript?</summary>
13 <p>JavaScript makes websites interactive and dynamic. It's a programming language that runs in browsers.</p>
14</details>Can contain any HTML inside:
1<details>
2 <summary>Contact Information</summary>
3 <ul>
4 <li>Email: info@example.com</li>
5 <li>Phone: +91 12345 67890</li>
6 <li>Address: Lucknow, India</li>
7 </ul>
8 <img src="map.jpg" alt="Location map">
9 <p>Office hours: 9 AM to 6 PM, Monday to Friday</p>
10</details>Attributes:
Attribute | What it does |
|---|---|
| Makes the details visible by default (not collapsed) |
Use cases:
FAQ sections
"Read more" buttons
Hidden technical details
Spoiler warnings
Product specifications