The accordion UI has lengthy been a favourite of net designers. It’s helpful for storing a major quantity of content material in a restricted house. Plus, it provides the form of interactivity shoppers love on cellular and desktop gadgets.
Accordions are additionally evolving fairly a bit. Because of developments in CSS and JavaScript, it’s now doable to go nicely past the usual UIs we’re used to seeing. Every part from animation to alignment could be tweaked to create one thing distinctive.
At this time, we’ll introduce you to eight accordion UIs that showcase what could be achieved with trendy coding methods. Let’s get began!
Pure CSS Horizontal Accordion by Aysha Anggraini
Accordion UIs have historically been vertical – however no rule says issues have to remain that manner. This horizontally-oriented snippet reveals content material on hover. Even higher is that there’s no JavaScript required.
See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini
Funky Pure CSS Accordion by Jamie Coulter
CSS each powers and types this accordion, turning it into an interactive occasion listing. Animation is used to assist in tab transitions and introduce ornamental icons. General, it’s a slick UI and demonstrates that accordions could be each helpful and exquisite.
See the Pen Funky Pure CSS Accordion by Jamie Coulter
Minimal Accordion in React by Matthew Vincent
JavaScript libraries akin to React are additionally fertile floor for constructing accordion parts. This engaging snippet options easy animation and a minimal design. It’s an ideal match for contemporary net functions.
See the Pen Accordion – React by Matthew Vincent
Native Accordion with <particulars>by Giana
With the particulars HTML aspect, you now not want different languages to create an accordion UI. As on this instance, CSS is merely used as a option to improve the styling. This native characteristic means nice efficiency and extra accessibility. Oh, and it’s additionally supported by all trendy browsers!
See the Pen Native accordion with <particulars> by Giana
ARIA Accessible Accordion by Kiri Egington
Accessibility is a primary concern for all UI components. For accordions, the main focus is on extra than simply having readable fonts and acceptable colour distinction ratios. The flexibility to navigate every part by way of keyboard can also be necessary – which is the place this snippet is available in. By utilizing the TAB and ENTER keys, it’s doable to undergo every part and devour its content material.
See the Pen ARIA Accessible Accordion by Kiri Egington
Gracefully-Degrading <particulars>Accordion (Vanilla JS) by Keith Pickering
As we beforehand talked about, an HTML-powered accordion is feasible by way of the particulars aspect. Nonetheless, the person expertise can nonetheless be enhanced. Right here, CSS and vanilla JavaScript has been used so as to add animation and calculate every part’s top. If a person doesn’t have JavaScript enabled, the UI will gracefully degrade.
See the Pen Gracefully-degrading <particulars>accordion (Vanilla JS) by Keith Pickering
Pure Accordion CSS by Tuna
This pure CSS accordion demonstrates what a number of intelligent design options can add to the combo. The creator makes nice use of typography to make sure that every part’s title stands out. As well as, hashtag hyperlinks are used to theoretically take customers to associated topics. There are numerous potentialities to suit into a comparatively tiny house.
See the Pen Accordion by Tuna
Responsive CSS Accordion Gallery with Zoom Animation by Daniel Subat
An accordion-based picture gallery? Not solely is it doable, but in addition very properly applied on this snippet. There’s rather a lot to discover:CSS picture filters, hover results and transforms make for a compelling UX. Regardless of all of that goodness, the quantity of code behind the scenes is minimal.
See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat
Carry Out the Accordions
Accordion UIs have withstood the check of time. Fortunately their seems have lastly caught as much as their utility. Designers can make the most of the most recent CSS to attain nearly any type, whereas JavaScript can add superior performance.
Maybe the largest revelation is the flexibility to create these interfaces utilizing native HTML. This places compatibility and accessibility on the forefront. It additionally ensures that we’ll be including accordions to our initiatives for years to come back.
Need to see much more examples of what accordion UIs can do? Take a look at our CodePen assortment.
