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.
An accordion is also emerging. Thanks to advances in CSS and JavaScript, it’s possible to go far beyond the standard UIs we’re used to now. Everything from animation to alignment can be tweaked to create something unique.
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
Box UIs tend to be vertical – but no rule says things have to stay that way. This horizontally oriented snippet reveals content on the net. Even better is that it doesn’t require JavaScript.
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
JavaScript libraries such as React are also fertile ground for building accordion components. This attractive snippet has smooth animations and minimal design. It is a perfect fit for modern web applications.
Watch The Music Box – React by Matthew Vincent
Folk Music Box with
with Giana
With the 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. TAB and 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 details element. However, the user experience can still be improved. Here, CSS and vanilla JavaScript were used to add animation and calculate the height of each section. If a user does not have JavaScript enabled, the UI will gracefully degrade.
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
The Box UI has stood the test of time. Thank God their vision has finally found its utility. Designers can take advantage of the latest CSS to achieve almost any style, and JavaScript can add advanced functionality.
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.
