Behavior comparison
Accordion vs Tabs
Decisive difference
Accordion stacks sections whose content appears beneath each heading; Tabs swap one panel for another and show only one at a time.
Choice criteria, links and sources
- AccordionChoose Accordion if several sections may stay open at once and read top to bottom, like a FAQ.Open entry Accordion
- TabsChoose Tabs if the views are peers and only one should occupy the space at a time.Open entry Tabs
See the nine dimensionsSee the sources
Change view or reveal content
Try it
Should the control switch views, choose a compact mode, or reveal content in the flow?
Accordion
Shared trial context
A project workspace reveals related content in place while preserving the user's position on the page.
Accordion
Mission
Accordion
Expand Refunds, move to Payment methods with keyboard, open it, and collapse Refunds again.
Essential information, always open
This answer must remain visible to complete the process.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- 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.
Tabs
Mission
Tabs
Move focus from Overview to Files with arrow keys, then press Enter to display its panel.
Project summary and upcoming deadlines.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- One selected tab names the visible panel, and the other panels are hidden from interaction.
- Edge case
- If a panel needs noticeable loading time, activation becomes manual so arrow navigation does not trigger repeated waits.
What this example shows
Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.
Which fits your need?
Accordion
Organizing FAQ answers or optional detail sections
Tabs
Grouping a few peer views in one workspace
Difference and sources
Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Heading
A meaningful heading that introduces the message or disclosure.
Decision
Family question
Should the control switch views, choose a compact mode, or reveal content in the flow?
Three criteria to choose
- Interactivity
Accordion
One or several content panels expand and collapse without changing page context.
Tabs
One tab and panel are active; activation may be automatic or manual depending on loading cost.
- Placement
Accordion
Vertically stacked headings with each panel directly following its control.
Tabs
A tab list directly adjacent to the panel controlled by the active tab.
- Focus
Accordion
Focus remains on the header button when its panel opens or closes.
Tabs
The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
Nine dimensions
- Trigger
Accordion
Click, tap, Enter, or Space on a section heading button.
Tabs
Click, tap, or keyboard activation of a tab; arrow keys move within the tab list.
- Modality
Accordion
Non-modal disclosure inside the document flow.
Tabs
Non-modal navigation between related panels in the same context.
- Placement
Accordion
Vertically stacked headings with each panel directly following its control.
Tabs
A tab list directly adjacent to the panel controlled by the active tab.
- Interactivity
Accordion
One or several content panels expand and collapse without changing page context.
Tabs
One tab and panel are active; activation may be automatic or manual depending on loading cost.
- Focus
Accordion
Focus remains on the header button when its panel opens or closes.
Tabs
The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
- Dismissal
Accordion
Each expanded panel closes by activating its own header when the product allows collapse.
Tabs
Not applicable: selecting another tab replaces the visible panel without closing the component.
- Accessible role
Accordion
heading > button[aria-expanded][aria-controls] + region
Tabs
tablist > tab + tabpanel
- Use case
Accordion
Organizing FAQ answers or optional detail sections
Tabs
Grouping a few peer views in one workspace
- Mobile behavior
Accordion
Use full-width heading buttons and preserve the reading position as panels change height.
Tabs
Keep labels readable in a horizontally scrollable list; avoid wrapping tabs onto ambiguous rows.
| Dimension | AccordionAccordion | TabsTabs |
|---|---|---|
| Trigger | Click, tap, Enter, or Space on a section heading button. | Click, tap, or keyboard activation of a tab; arrow keys move within the tab list. |
| Modality | Non-modal disclosure inside the document flow. | Non-modal navigation between related panels in the same context. |
| Placement | Vertically stacked headings with each panel directly following its control. | A tab list directly adjacent to the panel controlled by the active tab. |
| Interactivity | One or several content panels expand and collapse without changing page context. | One tab and panel are active; activation may be automatic or manual depending on loading cost. |
| Focus | Focus remains on the header button when its panel opens or closes. | The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content. |
| Dismissal | Each expanded panel closes by activating its own header when the product allows collapse. | Not applicable: selecting another tab replaces the visible panel without closing the component. |
| Accessible role | heading > button[aria-expanded][aria-controls] + region | tablist > tab + tabpanel |
| Use case | Organizing FAQ answers or optional detail sections | Grouping a few peer views in one workspace |
| Mobile behavior | Use full-width heading buttons and preserve the reading position as panels change height. | Keep labels readable in a horizontally scrollable list; avoid wrapping tabs onto ambiguous rows. |