Accordion UI has long been a favorite of web designers. It is convenient for storing a significant amount of material in a limited space. Plus, it enhances the kind of interaction clients love on mobile and desktop devices.
Today, we’ll bring you eight accordion interfaces that show what can be achieved with modern coding techniques. On with us!
CSS Pure Horizontal Box by Aysha Anggraini
See CSS Pure Pen Horizontal Box by Aysha Anggraini
Accordion CSS Funky Pure by Jamie Coulter
CSS styles this music box and makes it an interactive event list. Animation is used to assist tab transitions and to introduce decorative icons. Overall, it’s a slick UI and shows that an accordion can be useful and beautiful.
Check out the Funky Pure CSS Accordion Pen by Jamie Coulter
Minimal music box in React by Matthew Vincent
Watch The Music Box – React by Matthew Vincent
Folk Music Box with
details An HTML element, you no longer need other languages to create an accordion UI. As in this example, CSS is only used as a way to improve the styling. This inherent feature means great performance and more accessibility. Oh, and it’s also supported by all modern browsers!
Look at the music box Native Pen with
ARIA Accessible Accordion by Kiri Eggington
Accessibility is a key concern for all UI elements. For an accordion, the focus is on more than legible fonts and acceptable color contrast ratios. It’s also important that you’re able to navigate each section via a keyboard – that’s where this section comes in.
ENTER keys, it is possible to go through each section and consume its contents.
See the ARIA Pen Accessible Box by Kiri Eggington
Music box (Vanilla JS) going from grace to Degenerate by Keith Pickering
As mentioned before, music box can be HTML-driven through the
Look at the box
Pure Accordion CSS with tuna
This pure CSS music box shows what some clever design elements can add to the mix. The author makes great use of typography to ensure that each section title stands out. In addition, hashtag links are used to theoretically bring users to related topics. There are many possibilities to fit into a tiny space.
See the Tuna Music Box
CSS Accordion Responsive Gallery with Zoom Animation by Daniel Subat
A music box based photo gallery? Not only is it possible, but also very well implemented in this fragment. There’s a lot to explore: CSS image filters, hover effects and transformations make for a compelling UX. Despite all that goodness, there is very little code behind the scenes.
See Pen accordion gallery zoom animation (css, responsive) by Daniel Subat
Take Out the Boards
Perhaps the biggest revelation is the ability to create these interfaces using native HTML. This prioritizes compatibility and accessibility. It also ensures that we will be adding an accordion to our projects for years to come.
Want to see more examples of what accordion interfaces can do? Check out our CodePen collection.