What collapsing buys
Long pages on mobile become endless scrolling, and small screens make orientation harder (Kim et al., 2015). Accordions show headings first, revealing structure at a glance and easing cognitive load (Sweller, 1988), a classic form of progressive disclosure. Users judge by information scent (Pirolli & Card, 1999), so headings must describe contents accurately.
When to use and avoid
Loranger (2014) recommends accordions when users need only part of the content, such as FAQs, specs or settings groups. If most users must read nearly everything, opening each panel adds work; leave it expanded and build visual hierarchy with headings. Long heading lists strain scanning (Miller, 1956), so reorganise the information architecture first.
Design and accessibility
Make the whole heading row tappable and show state with an arrow. Auto-closing others can hinder comparison, so decide by context, and avoid jumping scroll positions. Per the W3C accordion pattern (n.d.), use button headings with aria-expanded, meeting WCAG 2.2 (W3C, 2023) 4.1.2. Consider letting find-in-page reach collapsed content.
FAQ
- Should only one panel open at a time?
- No single answer; allow several for comparison, one at a time for sequential content.
- Is it bad for SEO?
- Hidden content still in the HTML is readable by search engines, but keep key content expanded.
Sources reviewed: 2026-10-27
References
- Loranger, H. (2014, May 18). Accordions for complex website content on desktops. Nielsen Norman Group. When accordions help or hurt.
- World Wide Web Consortium. (n.d.). Accordion pattern (sections with show/hide functionality). ARIA Authoring Practices Guide. Header buttons, aria-expanded and keys.
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. Scent decides what users open.
- Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. Extraneous information burdens memory.
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. Small screens raise scrolling burden.
- Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. Limits on items scanned at once.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criteria 4.1.2 and 2.4.6.