An accordion is a vertical list of headings where each one opens to show the text underneath and closes again when clicked. It folds a long page into a short, scannable list, which is why it shows up so often on FAQ pages and on mobile product pages.
How an accordion opens and closes
Each item has a header, which acts as a button, and a panel holding the content. Clicking the header toggles the panel between hidden and visible, usually with a small arrow or plus sign that rotates to show the state. Some accordions let several panels stay open at once; others close the previous panel whenever a new one opens.
HTML now has a native version: the <details> element with a <summary> inside it. It opens and closes without any JavaScript, works with the keyboard, and is announced correctly by screen readers. Adding the same name attribute to a group of <details> elements makes them behave exclusively, so only one stays open, in current browsers. Custom-built accordions need aria-expanded on each header button so assistive technology knows the state; ARIA covers that.
Example: a dental practice FAQ
A dental clinic gets the same twelve questions on the phone: insurance, emergency appointments, parking, children's visits. Written out in full, the FAQ is a wall of text. As an accordion, a visitor sees twelve short questions, taps "Do you take emergency patients?" and reads only that answer.
Accordion or tabs?
Both hide content until asked for. Tabs sit side by side and suit a few parallel sections on a wide screen. An accordion stacks vertically, so it handles many sections and narrow phone screens better. A common responsive pattern shows tabs on desktop and the same content as an accordion on mobile.
When it is the right choice
Use one when visitors want one or two answers out of many, as on FAQs, policy summaries and spec sheets. Avoid it for content everyone should read in sequence, such as step-by-step instructions, because collapsing it adds clicks and hides the flow. Google says it indexes content in collapsed sections on mobile, but if you mark up an FAQ with structured data, the questions and answers in the markup must match what is on the page.
Accordion mistakes to avoid
- Clickable area too small. Make the whole header row tappable, not just the little arrow.
- Using div elements as buttons. They cannot be reached by keyboard unless you add a lot of extra code. Use a real button or
<details>. - Auto-closing that jumps the page. When one panel opens and a tall one above it closes, the content shifts and the reader loses their place.
- Nesting accordions inside accordions. Two levels of hidden content is hard to navigate and easy to miss.
Related terms
- Tabs: the horizontal way to switch between sections.
- ARIA: states that tell screen readers a panel is open.
- Responsive design: why accordions are common on phones.
- Structured data: relevant when the accordion holds an FAQ.