Accordion

An accordion is a UI element that allows users to expand or collapse content within a web page or app. It works like a musical accordion — when one section is expanded, the others collapse.

Here are some key features of accordions:

• Consist of tabs or sections representing different content pieces
• When a user clicks on a tab or section, it expands to reveal associated content
• Other tabs or sections collapse to keep the interface clean and organized

Learn the nuances of designing accordions in the Intro to Accordions lesson.

Accordions are an effective way to present large amounts of content in a compact and organized way, without overwhelming users. Accordions are often used for FAQs, product specifications, or content that needs to be hidden initially but can be easily accessed if needed.

Although accordions are a helpful UI design element, there are situations where they may not be the best choice, for example:

• Limited content: if you only have a few pieces of content, adding an accordion will complicate design and increase cognitive load.
• Accessibility concerns: accordions can be difficult for users who rely on screen readers or keyboard navigation. In these cases, it may be better to use a simple list or another UI element.
• Mobile devices: on mobile devices, accordions can be difficult to use if the tabs or sections are too small or if users has a small screen.
• Visual hierarchy: if all of the content within the accordion is equally important, using an accordion may not be the best choice. A simple list or grid may be more appropriate.

Both accordions and tabs are UI design patterns that organize content and information. However, there are some differences between the two.

Accordions are typically vertically stacked and best used for organizing large amounts of related content into smaller sections, such as FAQs. However, accordions can create excessive scrolling on a page and cause a layout shift when users click between sections.

Tabs are commonly horizontally aligned and best used for presenting a small number of content sections (up to 5) in a clear and organized way. They are useful for navigating between unrelated sections, like product features or categories. On mobile devices, tabs can be particularly useful for keeping navigational sections visible when users scroll down.