Native Accordion with details and summary

Create collapsible content with clean semantics and keyboard support without relying on JavaScript.

📘 Theory

The basic pattern

A small native feature with a lot of practical value.

`summary` is the visible trigger. It should be descriptive enough for the user to know what they will reveal before opening the section.

Inside `details`, keep the content structured and reasonably short. If the hidden block becomes too heavy, the accordion starts to work against clarity.

Good practices for collapsible content

Less noise, more clarity.

Avoid vague labels such as "More info".
Do not hide essential content inside an accordion by default.
Keep answers short and easy to scan.
Use `open` only when the initial context truly benefits from it.

1 The basic pattern 2 Good practices for collapsible content

🧪 Learn by doing

Example Guided example: FAQ block Structure a small semantic and accessible FAQ.

⌄

Example Interactive demo: native accordion and exclusive group behavior Inspect `open`, the `toggle` event and how grouped disclosure blocks behave.

⌄

🏁 Challenges

Challenge Challenge: open a section by default Control the initial state with a boolean attribute.

⌄

🧰 Resources

Useful links

MDN - details MDN - summary

Test

Check your knowledge with a test about HTML.

Test for HTML

CodePen: Details and summary pattern

Open in CodePen

Course resources 27

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 19

HTML + CSS + JavaScript Integration: Loading and Execution Order