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!
See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini
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.
See the Pen Funky Pure CSS Accordion by Jamie Coulter
See the Pen Accordion – React by Matthew Vincent
With the 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!
See the Pen Native accordion with by Giana
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 and keys, it’s possible to go through each section and consume its content.
See the Pen ARIA Accessible Accordion by Kiri Egington
See the Pen Gracefully-degrading accordion (Vanilla JS) by Keith Pickering
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.
See the Pen Accordion by Tuna
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.
See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat
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.
Want to see even more examples of what accordion UIs can do? Check out our CodePen collection.