Primary text
Secondary text
Accordion content
Default
Secondary Text
Expanded
Collapsed
Loading
Both accordions and tabs are used to organize similar information to make easier to consume for the user. However, when to use either pattern depends on the content and use case. Accordions are useful when needing to compare information on the same page, whereas tabs alleviate long scrolling pages by piecing out related in content.
Additionally, tabs may be better option if there is a lot of information for each content section. The amount of content options to toggle through will also help determine whether to use accordions or tabs. If there are many, then tabs might be a better option. However, remember that if there is a lot of content for each, then accordions lose their benefit of seeing two sections of content at the same time.³
Another thing to note, accordions are a great pattern for responsive design and smaller screens.⁴ They are better suited for the vertical scrolling nature of content on mobile devices.
Ensure the interaction is the same wherever the accordion component is used.
Do
Don't
Accordions typically push the page content down when in an open state. This helps keep the users eye in the same place without jumping the content on the screen. However, there are some instances that may necessitate content being pushed up or to the side depending on location of the accordion or device screen size.
It is best practice to have the state of the accordion remembered the next time that user visits the page. This allows for more continuity for the user, as well as make the experience more intuitive to the user's needs.
Use accordions to present the user with less visual clutter on a page. Hidden content is generally less crucial information or content that only applies in certain scenarios. It is best to not hide critical information in an accordion. If all the information is important, then it may be best to have a long scrolling page to ensure the user is aware of all the content.²
Use secondary text when there is information that you want the user to be able to see at all times.
The primary text should inform the user about what they will find in the accordion. It should be short and to-the-point. Use title case.
Include secondary text as a subheading that provides more information only if the primary text is insufficient.
Cursus Lorem Tellus Consectetur Sem
Laubheimer, Page and Budiu, Raluca. "Accordion Icons: Which Signifiers Work Best?" Nielson Norman Group, August 23, 2020 https://www.nngroup.com/articles/accordion-icons/
Loranger, Hoa. "Accordions Are Not Always the Answer for Complex Content on Desktops" Nielson Norman Group, May 18, 2014 https://www.nngroup.com/articles/accordions-complex-content/
Kapoor, Mehek. "Little Details in UX Design: Tabs vs Accordions" UX Collective, March 28, 2019 https://uxdesign.cc/little-things-in-ux-design-part-1-tabs-v-s-accordions-47390e4910c3
Nigam, Arnav. "When To Use What— Module Tabs vs Accordion vs Single Page" UX Planet, Dec 8, 2020 https://uxdesign.cc/little-things-in-ux-design-part-1-tabs-v-s-accordions-47390e4910c3
Friedman, Vitaly. "Designing the Perfect Accordion" Smashing Magazine, June 21, 2017 https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
