Accordion - UI Element

What is a UI Accordion?

An accordion is a UI element that consists of a vertically stacked list of components that can be expanded or collapsed. When triggered by an interaction, accordions allow users to see or hide the associated content as desired. 

Types of Accordions in UI/UX Design

  1. Single Accordion 

This is the most basic type of accordion, consisting of a single panel that can be expanded or collapsed. This is usually used for additional information under the form of “Learn More”.

Types of Accordions in UI Design
Single Accordion by uinkits
  1. Stacked Accordion 

Stacked accordions are a collection of multiple single accordions stacked together. Each accordion works individually, and users can choose which accordion to open. Stacked accordions won’t reveal all accordions, just the ones selected.

Types of Accordions in UI Design
Stacked Accordion by uinkits
  1. Hierarchical Accordion 

Hierarchical accordions are stacked accordions with other sublayers. Users can expand or collapse both main panels and sub-panels. This is used for displaying structured information with multiple levels – such as categories and subcategories.

Types of Accordions in UI Design
Hierarchical Accordion by uinkits
  1. Accordion Menu

Accordion menus are often found in website navigation. It displays a list of categories or menu items, and when clicked or tapped, the menu item expands to reveal sub-items or related content.

Types of Accordions in UI Design
Accordion Menu by uinkits

States of an Accordion in UI Design

The default states of an accordion are:

  • 🔽 Collapsed
  • 🔼 Expanded
  • 🖱️ Onhovered
  • 🔍 Focused
  • 🚫 Disabled

Anatomy of Accordions in UI/UX Design

  1. Headers 

Accordion headers serve as the clickable titles or labels that users interact with to expand or collapse accordion sections. These titles are short phrases describing the content within the corresponding section, giving the user an idea of what they will find out when clicking on it.

  1. Icons 

Icons indicate the nature of accordion sections. It serves as a visual cue that prompts users to click on the header to reveal or hide the associated content. These are usually to the right or the left of the headers and are oriented in a way that aligns with the direction of expansion.

When creating an accordion, use the following icon sets:

  • Chevron icon
  • Up/Down arrow
  • Up/Down caret
  • Plus/Minus
  1. Panels 

Panels refer to the content areas within an accordion that expands and collapses when interacting with the headers. This represents the hidden information or content that is revealed when we click on the corresponding accordion header.

Panels can contain various types of content – such as text, images, forms, or embedded multimedia elements. The content within the panels provides additional information or options related to the header, helping users access relevant details without overwhelming the interface.

When To Use Accordions in Your Design

  • Long Content

Use accordions on content-heavy websites where the content is lengthy but not all of it is essential for all users. For example, FAQ pages use accordions and let users scan through the list of questions and choose the ones they are most interested in.

  • Limited Space

Accordions are used in mobile devices due to the limited space available. Accordions provide an overview of the content rather than making them scroll endlessly.

  • Step-By-Step Information

Use accordions when sequentially presenting information to break down each step. This is used on onboarding processes, completing forms, etc.

  • Filters and Sorting

Accordions are used when filtering information without going through all the other filters. They serve as structural components that allow users to expand only the desired sections without dealing with other unnecessary filters.

Use the Accordion UI Element in Your UI/UX Design With uinkits

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find all types of accordions and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!