What Is an Accordion (UI Component)?
An accordion is a user-interface component made of stacked, clickable headings that expand to reveal content and collapse to hide it, so only the sections a visitor wants are open at once. Named after the folding musical instrument, it lets a page present a lot of information compactly, showing titles first and full detail on demand. Accordions are common for FAQs, product specs, and mobile menus, where space is tight. Used well they improve scannability; used poorly they can hide important content and hurt accessibility if not built correctly.
- What it is
- Stacked headings that expand and collapse to show or hide content panels
- Common uses
- FAQs, product details, filters, and mobile navigation menus
- Native option
- HTML details and summary elements create an accordion without JavaScript (MDN)
- Accessibility
- Needs keyboard support and ARIA states when custom-built (WCAG 2.2)
- Trade-off
- Saves space but hides content behind a click, which can reduce discovery
- SEO note
- Modern Google indexes hidden accordion text, so it still counts (Google Search Central)
What an accordion is #
An accordion is a common web-design pattern built from a vertical stack of headings, each of which can be clicked to reveal or hide a panel of content beneath it. When collapsed, the page shows only the headings, a tidy list of titles; when a visitor clicks one, its section expands to show the full detail, and clicking again folds it away. The name comes from the musical instrument, whose bellows fold and unfold much like these panels. The pattern's appeal is compactness: it lets a page offer a great deal of information without overwhelming the visitor, who sees an overview first and drills into only what interests them. Accordions turn up constantly on FAQ pages, product specification lists, filter sidebars, and mobile menus. Whether an accordion helps or harms depends entirely on how and where it is used, and how well it is built. Our /services/ui-ux-design work treats accordions as one tool among many, chosen when compact, on-demand detail genuinely serves the visitor rather than by default.
When accordions genuinely help #
Accordions shine when a page holds a lot of secondary information that not every visitor needs at once. A frequently asked questions section is the classic fit: visitors scan the questions, which double as headings, and open only the one or two that apply to them, instead of scrolling through paragraphs of answers they will never read. Product pages use them to tuck away detailed specifications, shipping terms, or care instructions, keeping the main view focused while the detail stays one click away. Filter panels and long forms can group options under collapsible headings to reduce visual clutter. In each case the content is genuinely optional or reference-style, and the visitor benefits from a scannable overview. The key test is whether hiding the detail helps the reader focus or simply buries something they need. When it is the former, an accordion improves the experience meaningfully. Our /services/conversion-optimization work often uses well-placed accordions to keep key pages clean and scannable, so visitors reach the information and actions that matter without wading through everything at once.
When accordions do more harm than good #
Accordions carry a real cost: they hide content behind an extra click, and anything hidden is less likely to be read. That is fine for optional detail but harmful when applied to information visitors actually need. Burying key selling points, pricing, or a primary call to action inside a collapsed panel means many people never see it, quietly costing you conversions. Accordions also add friction, requiring a click and a wait before the content appears, which frustrates users who would have happily scrolled. On desktop, where vertical space is cheap, collapsing content that could simply be shown is often a mistake driven by a wish to look tidy rather than to serve the reader. Overusing accordions can turn a page into a frustrating series of closed doors. The honest rule is to hide only what is genuinely secondary and to keep essential content visible. If your important messages are tucked away and conversions are weak, our /free-website-audit frequently finds over-aggressive accordions among the culprits worth rethinking.
A no-JavaScript accordion #
The native HTML details and summary elements create an accessible accordion that works without any JavaScript.
<details>
<summary>Do you offer emergency service?</summary>
<p>Yes. We answer calls 24/7 for burst pipes and leaks.</p>
</details>
<details>
<summary>What areas do you cover?</summary>
<p>All of greater Austin, plus surrounding suburbs.</p>
</details>Building accordions accessibly #
An accordion is only as good as its accessibility, and custom-built ones often fail here. Every visitor, including those using a keyboard or a screen reader, must be able to operate it. The native HTML details and summary elements handle this for you, providing keyboard support and correct announcements out of the box (MDN). When developers build a custom accordion with JavaScript instead, they must add it all by hand: the headings must be reachable and toggleable with the keyboard, and the code must announce whether each section is expanded or collapsed using ARIA attributes so screen-reader users know the state. WCAG 2.2 sets the standard these interactions must meet. A poorly built accordion that only responds to a mouse click locks out anyone who cannot use one, which is both an accessibility failure and, in the United States, a growing legal risk under the ADA. Getting this right is not optional. Our /services/ada-compliance work ensures interactive components like accordions meet the standard rather than quietly excluding part of your audience.
Accordions on mobile screens #
Accordions earn their keep most clearly on mobile, where screen space is scarce and long pages force endless scrolling. Collapsing sections into tappable headings lets a phone user see the structure of a page at a glance and jump straight to the part they want, rather than scrolling past everything. This is why mobile navigation menus so often use an accordion or a related collapsible pattern, and why FAQ and product pages frequently switch to accordions on small screens even when they show content fully on desktop. The pattern respects the reality that thumbs and small displays make scanning harder. That said, the same cautions apply: tap targets must be big enough to hit comfortably, the expand action must be obvious, and essential content still should not be buried. With more than half of web traffic now on phones, mobile behavior is not an afterthought. Our /services/web-design and /services/conversion-optimization work treat the mobile experience as primary, using accordions where they genuinely help small-screen visitors find what they came for.
Do accordions hurt SEO? #
A common worry is that content hidden inside a collapsed accordion will be ignored by Google and hurt rankings. For modern search this is largely a myth. Google has confirmed that content hidden behind tabs or accordions for user-experience reasons is still crawled, indexed, and weighted normally, because it is present in the page's code (Google Search Central). So placing FAQ answers or product details in an accordion does not hide them from search. The important qualifier is that the content must actually be in the page's HTML, not loaded only after a click through a separate request, which can complicate indexing. Well-built accordions, including the native details element, keep the text in the markup, so search engines see everything. This means you can enjoy an accordion's tidy layout without an SEO penalty. Still, content that matters for ranking and for humans is often best kept visible and well-structured. Our /services/seo-services work makes sure a page's structure serves both search engines and readers, accordions included, rather than one at the expense of the other.
Using accordions well on your site #
The practical guidance for accordions comes down to intent: use them to organize genuinely secondary or reference content, not to hide things you actually want people to see. On a page, ask what a visitor needs immediately and keep that visible, then consider an accordion only for the supporting detail behind it. Keep the headings clear and descriptive, since they are what a scanning visitor reads first, make sure they are keyboard-accessible, and avoid nesting accordions inside accordions, which quickly becomes confusing. Test the page on a real phone, because a pattern that feels tidy on a big monitor can behave differently under a thumb. Above all, resist the urge to collapse content simply to make a page look shorter; a clean layout is worthless if it buries your message. These are the kinds of judgment calls that separate a page that merely looks organized from one that actually converts. Our /services/ui-ux-design and /services/conversion-optimization work weigh them for each specific page and audience.
The bottom line on accordions #
An accordion is a stack of clickable headings that expand and collapse to show or hide content, letting a page present a lot of information compactly. It suits FAQs, product details, filters, and mobile menus, where showing an overview first and detail on demand genuinely helps. The catch is that anything collapsed is less likely to be read, so accordions should hide only secondary content, never your key messages or calls to action. Built correctly, ideally with the native details and summary elements, they are accessible and pose no SEO problem, since modern Google indexes their content. Built carelessly, they exclude keyboard users and bury important information. Like most design patterns, an accordion is neither good nor bad in itself; it depends entirely on where and how you use it. If your pages feel cluttered or your key messages are getting lost, our /services/ui-ux-design page and a /free-website-audit can help you decide when to collapse content and when to let it breathe.
FAQ
What is an accordion in web design?
An accordion is a component made of stacked, clickable headings that expand to reveal content and collapse to hide it, so only the sections a visitor opens are shown. It lets a page present lots of information compactly. Accordions are common on FAQ pages, product specifications, filters, and mobile navigation menus where space is limited.
When should I use an accordion?
Use one when a page has secondary or reference content that not every visitor needs at once, like FAQ answers or product specifications. An accordion keeps the overview scannable and puts detail one click away. Avoid it for essential content, pricing, or calls to action, since anything hidden behind a click is far less likely to be read.
Do accordions hurt SEO?
Generally no. Google has confirmed it crawls and indexes content hidden inside accordions and tabs, as long as that content is present in the page's HTML rather than loaded only after a click. So an accordion's tidy layout does not hide text from search engines. The content still counts toward rankings normally.
Are accordions accessible?
They can be, if built correctly. The native HTML details and summary elements provide keyboard support and screen-reader announcements automatically. Custom accordions must add keyboard operation and ARIA state attributes by hand to meet WCAG 2.2. A mouse-only accordion excludes keyboard and screen-reader users and is both an accessibility failure and a legal risk under the ADA.
What is the difference between an accordion and tabs?
Both hide content until requested, but they arrange it differently. Tabs place options side by side, showing one panel at a time in a fixed area. An accordion stacks sections vertically, expanding them in place, and can allow several open at once. Accordions suit long lists and small screens; tabs suit a few parallel views.
Can I build an accordion without JavaScript?
Yes. The native HTML details and summary elements create a working, accessible accordion with no JavaScript at all. You wrap each section's content in a details element and its heading in a summary element, and the browser handles expanding and collapsing. For more complex behavior or animations, developers add JavaScript on top.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?