When should you use an accordion on a website page?

Quick answer

Use an accordion when a page has lots of optional detail that most visitors will not need in full, such as FAQs, specifications or policies. Do not use one for information most visitors came for, such as prices, what is included or how to contact you. Make it accessible, and let several sections open at once.

What an accordion is

An accordion is a list of headings that each expand to reveal content when clicked, then collapse again. It is popular because it makes long pages look shorter and tidier, especially on phones. The trade-off is that anything inside an accordion is hidden until someone chooses to open it. That is a good thing for some content and a bad thing for other content.

Good uses

• FAQs. People scan the questions and open the one or two they care about.
• Specifications and technical detail that only some buyers need.
• Policies, such as delivery, returns and cancellation terms, where people look for one answer.
• Long reference pages where visitors arrive looking for one section.
• Mobile layouts where secondary content would otherwise push key information far down the page.

The UK government’s GOV.UK Design System guidance on accordions makes the same point: use them when users only need a few specific sections of a page, and test whether they help.

Bad uses

• Prices and what is included. Hiding them makes people think you are hiding them.
• The main content of a service page. If everyone needs it, show it.
• Short content. Three short answers do not need hiding.
• Content people compare, such as package differences, which is easier side by side in a table.
• Step-by-step instructions that must be read in order.

Research from the Nielsen Norman Group on accordions on desktop found that hiding content people need increases effort, because they have to open sections one by one to find it.

Accordion versus alternatives

Accessibility basics

A badly built accordion can be impossible to use without a mouse or with a screen reader. A good one:

• Uses real buttons for the headings, so they work with the keyboard.
• Tells screen readers whether each section is open or closed.
• Has a visible focus outline so keyboard users can see where they are.
• Shows a clear icon, such as a plus and minus or an arrow, that changes when opened.
• Lets people open several sections at once, and ideally offers “show all”.

The W3C’s accordion pattern guidance sets out the technical details developers should follow. Our guide to website accessibility covers the wider rules.

What about search engines?

Content inside accordions is in the page code and can be indexed. Google has said content hidden for usability reasons on mobile is treated normally. The bigger risk is human: if the answer to a visitor’s question is in a closed section with a vague heading, they may never find it. Write accordion headings as the question or topic people are looking for, in their words. Our SEO content writing guide covers writing headings that work for both.

Writing good accordion headings

The heading is the only part of an accordion people see before deciding whether to open it, so it has to carry the meaning. Write each heading as the question or topic visitors are looking for, in their words: “Do you charge for call-outs?” rather than “Charges”. Keep them short enough to fit on one line on a phone. Put the most commonly needed items first. And make sure the content inside actually answers the heading, in the first sentence, so people who open it are not sent hunting again.

Check how the accordion behaves on a phone too. When a long section opens, the page can jump, leaving the reader lost halfway down. A well-built accordion keeps the opened heading in view, so the reader sees the answer start right below it.

A worked example

A wedding venue’s website put everything in accordions: the packages, the prices, the capacity, the catering and the FAQs. Couples phoned to ask the price, because they never opened the section that showed it. The fix kept the FAQs and the detailed catering menus in accordions, but moved packages and prices into a visible comparison table near the top of the page, with capacity shown alongside. Enquiries became better informed, because the information most couples needed was now in plain view.

Getting it right

Every custom WordPress website we build uses patterns like accordions only where they help, built to be accessible. It is £499 one-off for up to eight pages. If your current site hides key information or is hard to update, our guide to a website redesign covers when a rebuild makes sense. Our guide on planning website content helps you decide what visitors need to see first, and all our prices are on the pricing page.