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.Ā
ā
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ā.
ā
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.
ā
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.
ā
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.
ā
ā
The default states of an accordion are:
ā
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.
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:
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.
ā
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.
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.
Use accordions when sequentially presenting information to break down each step. This is used on onboarding processes, completing forms, etc.
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.
ā
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!
