Accordions and tabs: when hiding content backfires

Key takeaways

Accordions and tabs fold content away behind headings so a page looks shorter. They help when visitors need only one or two of many sections, such as FAQs or detailed specifications. They backfire when they hide information most visitors need, such as prices, what is included or how to book. Keep decision-making content visible.

• Use accordions for many sections where most visitors need one or two.
• Never hide prices, inclusions or the next step in an accordion.
• Write headings that say exactly what is inside.
• Make them work with a keyboard and screen readers.

What are accordions and tabs?

An accordion is a vertical list of headings that expand to reveal content when clicked. Tabs show one panel at a time, switched by labels across the top. Both reduce visible length by hiding content until the visitor asks for it.

• The most common business website design mistakes
• How long should a web page be? Long vs short pages

When do accordions help?

Nielsen Norman Group suggests accordions work when people need only a few pieces of content on a page, such as FAQs, product specifications or policy details, and especially on mobile, where long pages are tiring. They let visitors scan headings and open only what is relevant.

• FAQ pages: when they help the journey and when they hide answers

When does hiding content backfire?

Hiding content backfires when most visitors need it. Every closed section is extra work and a chance to miss something. If prices, what is included, delivery times or the booking process sit in closed accordions, many visitors will never open them and will leave without the answer.

• Prices and what is included.
• How to book or get a quote.
• Key benefits and proof.
• Short content that would fit visibly anyway.

Are tabs worse than accordions?

Tabs hide more: visitors may not notice they exist, and on phones they are cramped. They suit a small number of parallel views, such as 'Domestic' and 'Commercial'. For anything longer, an accordion or simply headings with visible content usually works better.

How should accordions be designed?

Write headings that describe the content specifically ('What is included in a boiler service?', not 'Details'). Show a clear icon that indicates open and closed states. Allow several sections to be open at once. Make each heading a real button so keyboard and screen reader users can operate it.

• Keyboard accessibility: can your site work without a mouse?

Do accordions affect SEO?

Google indexes content hidden in accordions and tabs if it is in the page's HTML, and with mobile-first indexing it treats such content normally. The bigger risk is to visitors: content they never open does not persuade them. If it matters for the decision, show it.

• Does Google index content hidden on mobile?

What does this look like in practice?

A pattern we see: a service page puts 'Pricing', 'What's included' and 'How it works' into closed accordions to look tidy. Showing those three sections openly, and keeping accordions for the FAQs, puts the answers buyers need in front of them.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

Accordion checklist

• Keep prices, inclusions and next steps visible.
• Use accordions for FAQs and specifications.
• Write specific headings.
• Show clear open and closed icons.
• Make headings keyboard-operable buttons.
• Prefer accordions to tabs on mobile.

Next step

Open your main service page and list everything hidden in accordions or tabs. Move anything a buyer must know into view.