The accordion UI has long been a favorite of web designers. It’s handy for storing a significant amount of content in a limited space. Plus, it adds the kind of interactivity clients love on mobile and desktop devices.
Today, we’ll introduce you to eight accordion UIs that showcase what can be achieved with modern coding techniques. Let’s get started!
- Pure CSS Horizontal Accordion by Aysha Anggraini
- Funky Pure CSS Accordion by Jamie Coulter
- Minimal Accordion in React by Matthew Vincent
- Native Accordion with <details>by Giana
- ARIA Accessible Accordion by Kiri Egington
- Gracefully-Degrading <details>Accordion (Vanilla JS) by Keith Pickering
- Pure Accordion CSS by Tuna
- Responsive CSS Accordion Gallery with Zoom Animation by Daniel Subat
- Bring Out the Accordions
Pure CSS Horizontal Accordion by Aysha Anggraini
Funky Pure CSS Accordion by Jamie Coulter
CSS both powers and styles this accordion, turning it into an interactive event list. Animation is used to aid in tab transitions and introduce decorative icons. Overall, it’s a slick UI and demonstrates that accordions can be both useful and beautiful.
Minimal Accordion in React by Matthew Vincent
Native Accordion with <details>by Giana
details HTML element, you no longer need other languages to create an accordion UI. As in this example, CSS is merely used as a way to enhance the styling. This native feature means great performance and more accessibility. Oh, and it’s also supported by all modern browsers!
ARIA Accessible Accordion by Kiri Egington
Accessibility is a prime concern for all UI elements. For accordions, the focus is on more than just having readable fonts and acceptable color contrast ratios. The ability to navigate each section via keyboard is also important – which is where this snippet comes in. By using the
ENTER keys, it’s possible to go through each section and consume its content.
Gracefully-Degrading <details>Accordion (Vanilla JS) by Keith Pickering
As we previously mentioned, an HTML-powered accordion is possible via the
Pure Accordion CSS by Tuna
This pure CSS accordion demonstrates what a few clever design features can add to the mix. The author makes great use of typography to ensure that each section’s title stands out. In addition, hashtag links are used to theoretically take users to related subjects. There are a lot of possibilities to fit into a relatively tiny space.
Responsive CSS Accordion Gallery with Zoom Animation by Daniel Subat
An accordion-based photo gallery? Not only is it possible, but also very nicely implemented in this snippet. There’s a lot to explore:CSS image filters, hover effects and transforms make for a compelling UX. Despite all of that goodness, the amount of code behind the scenes is minimal.
Bring Out the Accordions
Perhaps the biggest revelation is the ability to create these interfaces using native HTML. This puts compatibility and accessibility at the forefront. It also ensures that we’ll be adding accordions to our projects for years to come.