Accordion vs. Tabs
An accordion opens sections in a page and may keep several open. Tabs show one section at a time in one shared space.
Use an accordion for questions or sections people may read together. Use tabs for a few separate views when only one matters at a time.
See what each pattern does
Try each example. Then read about the job it is made to do.
Accordion
An accordion stacks sections whose headings can open or close their own content.
Accordion
An accordion stacks sections whose headings can open or close their own content.
Choose it when
Use it for optional sections that each have a clear, separate heading.
An FAQ shows the questions first. A person can open an answer without leaving the page.
- Use it when
- Use it for optional sections that each have a clear, separate heading.
- Do not use it when
- Never hide short, essential information only to make the page look neat.
- Name used in code
<details><summary>
Tabs
Tabs use labels to switch content in one shared panel. The main task stays open.
Overview, Activity, and Permissions change the panel below while the same project stays open.
- Use it when
- Use tabs for a few sections at the same level when their labels should stay visible.
- Do not use it when
- Never use tabs as small links to pages that have nothing to do with each other.
- Name used in code
role="tablist"
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Accordion | Use it for optional sections that each have a clear, separate heading. | Never hide short, essential information only to make the page look neat. | <details><summary> |
| Tabs | Use tabs for a few sections at the same level when their labels should stay visible. | Never use tabs as small links to pages that have nothing to do with each other. | role="tablist" |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Accordion, Tabs for our real user flow. Use this rule: An accordion opens sections in a page and may keep several open. Tabs show one section at a time in one shared space. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.