The <details> element creates a native, built-in collapsible widget — expandable content the browser handles for you, no JavaScript required. It's always paired with a <summary>, which is the clickable, always-visible label.
Syntax & Example
<details>
<summary>What courses does CodingNow offer?</summary>
<p>AI, Data Science, Full Stack Development, and Cloud/DevOps programs.</p>
</details>Browser output: "What courses does CodingNow offer?" appears with a small triangle/arrow indicator. Clicking it reveals the paragraph below — collapsed by default, no CSS or JavaScript needed for the toggle behavior itself.
Open by Default
<details open>
<summary>Already expanded</summary>
<p>This content is visible immediately, but can still be collapsed by the user.</p>
</details>Practical Use Case
FAQ sections are the classic use case — each question as a <details>/<summary> pair. Also useful for "show more," collapsible code examples, or optional advanced settings — anywhere content should be hidden by default but easily revealed.
Why Prefer This Over a JavaScript Accordion
A native <details> element is keyboard-accessible, screen-reader-friendly, and works even if JavaScript fails to load — all for free. A custom JavaScript accordion needs deliberate ARIA attributes and keyboard handling to reach the same baseline accessibility.
Common Mistakes
- Using
<details>without a<summary>— the browser will show a generic "Details" label instead of your actual question/label - Styling it to look nothing like an expandable widget (removing the triangle indicator) without providing an alternative visual cue — confuses users about whether it's interactive
- Using it for content that must always be visible (like the FAQ pages in this notes hub — genuine FAQPage schema still needs the text present, just visually collapsed, which
<details>handles correctly since the content is in the DOM either way)
Interview Relevance
"How would you build an accordion without JavaScript?" — knowing <details>/<summary> exists and is natively accessible is a strong, modern answer.
Practice Question
Build a 3-question FAQ section using <details> and <summary>, with the first one open by default.
