A reusable piece of interface with its own structure and behavior.
A named value for color, spacing, type, or another design decision.
Shared names make design and implementation prompts precise.
Click a question — the row is the trigger, the turning chevron is the indicator
Accordion (Disclosure)
/ <details> · <summary> /
also called disclosure, expandable sections, collapse, expander
An accordion is a vertical stack of headings that disclose or hide associated content. Opening a section expands it in place and moves the sections below, with either one or several panels allowed open depending on the pattern. Native details and summary elements provide the basic disclosure semantics.
If you called it…
…you meant a accordion (disclosure).
Anatomy — every part, named
- 1Disclosure trigger
<summary>“The FAQ question you click to open the answer” is the disclosure trigger.
- 2Disclosure indicator
<summary>::marker“The little chevron that turns when the row opens” is the disclosure indicator.
- 3Disclosure panel
<details>“The answer area that pushes everything down” is the disclosure panel.
Prompt — paste into your agent
Build an Accordion from <details> and <summary> elements. Give grouped <details> elements the same name when only one section may be open, preserve native keyboard behavior, and animate the revealed panel without adding redundant aria-expanded; use aria-expanded only for a fully custom disclosure primitive.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my accordion (details/summary, Radix Accordion). Rule out: height auto refusing to animate — animate grid-template-rows 0fr to 1fr or use interpolate-size; single vs multiple type letting two panels open when one was intended; the default disclosure marker still rendering next to a custom icon; focus landing inside a closed panel because contents were hidden with opacity instead of display. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <details> | |
| HTML | <summary> | |
| HTML | name | groups details elements so only one is open |
| Radix | Accordion |