Interactive Sections (details & summary)
What are Details & Summary?
Imagine an FAQ (Frequently Asked Questions) section. You don't want to show all the long answers at once, because it would clutter the page. Instead, you show a list of questions with little arrows next to them. When the user clicks a question, the answer slides open underneath it.In HTML, you can build this interactive disclosure widget natively using the <details> and <summary> tags:
<details>: The outer wrapper container.<summary>: The visible heading or label. Clicking this toggles the open/close state of the hidden content inside details.Why does it matter?
Usually, building interactive accordion panels requires writing JavaScript event listeners or complex CSS state selectors. The<details> tag gives you this functionality for free out-of-the-box with zero scripts or extra styling required!
How to write it
Place a single<summary> first inside <details>, followed by the content you want to hide and show:
<details>
<summary>Help</summary>
<p>Contact support at [email protected].</p>
</details>
▼ Summary Heading (Click)
Accordion Content Panel...
Common Mistakes
<summary> element: If you leave out <summary>, the browser will automatically generate a generic default label (like "Details"), which might confuse your users.<summary> at the bottom: The <summary> tag must be the very first child of the <details> element.Quick Reference
<details> — Accordion toggle widget container.<summary> — Clickable heading handle for the accordion.Your Task
Create a `<details>` accordion. Set its `<summary>` to 'Help' and place a `<p>` inside containing 'Contact support.'
index.html
Type code above to start the lesson.
Live Preview