Accordion

Component preview

A vertical set of headings that reveals or hides each associated content section.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: expandable sections, collapsible panels, disclosure list

questions that open answers underneath
click a heading to expand its section
a vertical list of collapsible content
show and hide details one row at a time
an FAQ with expandable answers
open several sections without changing page

Try it

Change view or reveal content

Compare all three behaviors

Shared comparison scenario: A project workspace reveals related content in place while preserving the user's position on the page.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Accordion

Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.

Your task

Expand Refunds, move to Payment methods with keyboard, open it, and collapse Refunds again.

Edge case to verify

A mandatory open section cannot be collapsed and communicates that rule without presenting a false control.

Mission

Accordion

Expand Refunds, move to Payment methods with keyboard, open it, and collapse Refunds again.

Primary state: The expanded header exposes its state and the answer appears immediately after it.

Essential information, always open

This answer must remain visible to complete the process.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Heading

A meaningful heading that introduces the message or disclosure.

Use it when

Organizing FAQ answers or optional detail sections
Letting users scan headings before opening relevant content

Avoid it when

All content is short enough to show directly
The sections are primary destinations that need URLs

Compare similar concepts

Tabs control content panels; Segmented control chooses one value, while Accordion reveals sections vertically without replacing one shared panel.

Tabs

Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.

Segmented control

Technical details

Behaviors

Reveal and hide a section
Activating a header reveals or hides its associated content while exposing expanded state.
Navigate with arrows
Arrow keys move through related items according to their visual orientation.

States

Refunds collapsed
Refunds collapsed
Refunds expanded
Refunds expanded

State transitions

Refunds collapsed → Refunds expanded
Activating the Refunds header exposes its answer immediately after the header.
Refunds expanded → Refunds collapsed
Activating the expanded Refunds header hides only its associated answer.

Test scenarios

Context: A billing help page groups answers for invoices, refunds, and payment methods.
Mission: Expand Refunds, move to Payment methods with keyboard, open it, and collapse Refunds again.
Primary state: The expanded header exposes its state and the answer appears immediately after it.
Edge case: A mandatory open section cannot be collapsed and communicates that rule without presenting a false control.

Accessibility

Role: heading containing button with aria-expanded and controlled region
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus remains on the header button when its panel opens or closes.
Dismissal: Each expanded panel closes by activating its own header when the product allows collapse.
Scroll: Expanding or collapsing content keeps the controlling header visible and avoids an unexpected page jump.
Announcement: Heading level, button name, expanded state, and controlled relationship are exposed.
Keyboard: Tab reaches every header button
Enter or Space toggles a section
Optional arrow keys move between headers

Bindings

Accordion.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
accordion
radixPrimitive
Accordion
shadcnRecipe
Accordion
runtimeDependency
@radix-ui/react-accordion@1.2.16
packageName
@radix-ui/react-accordion
exportName
Accordion.Root
exactVersion
1.2.16
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix supplies disclosure state and keyboard support; heading levels, single or multiple expansion, and region use remain content decisions.
Verify binding source

Sources

WAI-ARIA APG: Accordion Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Accordion: accordion header and panel relationships plus expansion and keyboard guidance.
Radix Primitives: Accordion
Radix Primitives · documentation · 2026-07-16
Claim covered: Accordion: documented Radix Accordion parts, single or multiple expansion, and keyboard behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.