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
See the Pen 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.
See the Pen Funky Pure CSS Accordion by Jamie Coulter
Minimal Accordion in React by Matthew Vincent
See the Pen Accordion – 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!
See the Pen Native accordion with <details> by Giana
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.
See the Pen ARIA Accessible Accordion by Kiri Egington
Gracefully-Degrading <details>Accordion (Vanilla JS) by Keith Pickering
As we previously mentioned, an HTML-powered accordion is possible via the
See the Pen Gracefully-degrading <details>accordion (Vanilla JS) by Keith Pickering
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.
See the Pen Accordion by Tuna
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.
See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat
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.
Want to see even more examples of what accordion UIs can do? Check out our CodePen collection.
- Code Snippets That Demonstrate the Repelling Effect in Web Design