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.
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.
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 |