Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
Hire us to design & code! Let's build together ✊
We design in Figma & Webflow using the top-notch UX expertise and lay down the lines of code in React, Vue, Angular, Flutter and Swift.
Please, fill the form below or say 'Hello' hello@setproduct.com
Please, fill the form below or say 'Hello' hello@setproduct.com
Submit your Figma resource
Get listed at Setproduct and pumped to the Figma Community top as we can promote your freebie via our followers, newsletter and website.
By clicking Submit button below I agree to get listed at Setproduct Figma community profile.
Get published at Setproduct
Share your thoughts, research, conclusions around Design, Development, Product Management, Marketing, or other Tech-related topics.
You are free to promote yourself, but please consider a commercial post for advertising your product.
You are free to promote yourself, but please consider a commercial post for advertising your product.
We accept only unique publications never posted elsewhere.
We respect the Privacy Policy, so your link won't be distributed anywhere without your permission.
We respect the Privacy Policy, so your link won't be distributed anywhere without your permission.
tutorials
Accordion UI design
The exploration for Accordion component UI design, states, templates and use cases for desktop & mobile viewports.
Heya! Roman's here.
I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct to help startups and individuals save on design and release their apps faster.
Working for 20+ years in graphic design, last years I've been browsing thousands of apps, screens, components, and layouts almost DAILY to gather the most complete ebook of how to design components, templates, and entire apps.
Fortunately, I've started with the 1st chapter related to the State of Avatar. Glad I was listed on some popular design resources and got a bunch of retweets and mentions. Which makes me decide to continue my explorations, so meet the research aimed to explain on how to design Accordions.
Fortunately, I've started with the 1st chapter related to the State of Avatar. Glad I was listed on some popular design resources and got a bunch of retweets and mentions. Which makes me decide to continue my explorations, so meet the research aimed to explain on how to design Accordions.
What is Accordion?
Accordion (aka Expansion panel) — vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Table of contents
Accordion Anatomy
- States
- Chevrons
- Additional icons
Styles & Themes
- Expanded item
- Contained Accordion
- Separated Accordion
UX & Usability
- Using subtitles
- Using badges
- Helper text
- Mobile & desktop patterns
Research, copy and ideate with SetGPT!
We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.
Powered by the latest OpenAI gpt-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required
Anatomy
States
Default states for Accordion are:
- collapsed
- expanded
- onhovered
- focused
- disabled
Chevrons placement
Chevron icon represents the opportunity to expand/collapse Accordion item. Once Accordion was clicked, the chevron rotates to indicate the successful expansion. Further collapse returns the chevron to a previous position.
Instead of a chevron, you may use the following symbols:
- Up / down caret
- Plus / Minus
- Up / down arrow
Additional icon
In the case of right-sided Accordion, you may place additional icons to strengthen the meaning. Use wisely not to overload the component.
In some cases, you may apply colors to visually separate the items:
Styles & Themes
Expanded item
Highlight expanded state to let a user recognize what is opened in case of multiple Accordions. There are several possible styles for the highlighting:
- Elevation shadow
- Background fill
- Outline stroke
While the elevation works well on both smooth grey and white surfaces, you may fill the Accordion expanded item's background with 8–12% opacity fill. Fits good for white surfaces. Add outline stroke, if necessary.
Contained Accordion
Use contained Accordion for most of the cases. Separate its items by a slightly visible divider. This placement either saves some vertical space.
Separated Accordion
There are some cases when you can separate Accordions with whitespace. Use this method to divide when it's needless to save vertical space.
Accordion UX & Usability
Subtitle to pre-know
Enable a subtitle to inform your users about what to expect when Accordion expands. This either helps to display the user's pick when everything is collapsed.
Badge to pre-know
Either use a badge to indicate the selection hastily, while Accordion is collapsed.
Helper text
Enable a helper text for Accordion to ergonomically show up a user's pick when collapsed, especially for mobile viewports.
Mobile patterns
Full-width usage
On mobile devices use only full-width Accordions.
Side menu
Implement Accordions into the navigation drawer to reveal submenu items.
Filters
Use side panels with Accordions to utilize multiple filters, properties, etc.
Desktop patterns
Side menu
Analogous as mobiles, you may implement Accordion-driven side navigation for desktop apps, dashboards, etc.
Filters
Depending on the desktop layout structure, Accordions (e.g. as Filters) could be placed as both left or right-sided.
This is all you need to know to design better Accordions.
If you looking for those Accordion cards - Duplicate for Figma
Hope this exploration will help you to improve your in-app UX. The next chapter is for the App Bars, probably. Stay tuned!
If you looking for those Accordion cards - Duplicate for Figma
Hope this exploration will help you to improve your in-app UX. The next chapter is for the App Bars, probably. Stay tuned!
Related links
- Accordion component (React)
- Accordions as Expansion panels (Angular)
- Material-X accordions (Figma)
More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications