Content & display

Accordion / Collapse

Q: How do people describe a Accordion / Collapse in plain words?

sections that expand when I click the header FAQ rows that open one answer at a time a chevron that shows more content underneath

Q: How do I implement a Accordion / Collapse?

Implement an FAQ accordion: each item has a button header with aria-expanded, only one panel open at a time (optional), and keyboard support to move between headers.

Stacked headers that expand and collapse to show nested content.

Also known as accordion · expandable section · disclosure

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Accordion / Collapse".

Implement an FAQ accordion: each item has a button header with aria-expanded, only one panel open at a time (optional), and keyboard support to move between headers.

Anatomy:
- trigger header: Clickable title with chevron state.
- panel: Content revealed when expanded.

Preferred API / pattern: `shadcn Accordion (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Header not a button
○Avoid: All content collapsed with no default open for critical info.
○Avoid: Height animation fighting reduced-motion preferences.

In plain wordsHow people search for it

“sections that expand when I click the header”“FAQ rows that open one answer at a time”“a chevron that shows more content underneath”

AnatomyOpen for part names

trigger header: Clickable title with chevron state.
panel: Content revealed when expanded.

How to write itOpen for stack patterns

Web (HTML/CSS)details/summary / aria-expanded regions

React + Tailwind + shadcn/uishadcn Accordion (Radix)

SwiftUIDisclosureGroup

Ant Design<Collapse>

Notes

Accordions compress long pages (FAQs, settings groups). Decide single-vs-multiple open panels. Don't bury primary tasks only inside collapsed sections on first run. Animate height carefully for accessibility (prefer reduced motion).

Common mistakesHumans and models trip here

Header not a button: keyboard users can't open sections.
All content collapsed with no default open for critical info.
Height animation fighting reduced-motion preferences.

More failure symptoms on AI broke it.

Related patterns

Tree ViewA hierarchical list where nodes expand and collapse to reveal children.TabsA row of labels that swap mutually exclusive views in the same place.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X