12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Apr 24, 2020

Turning Oxygen’s Tabs into Accordion for Mobiles

David Browne

In this members-only tutorial we’ll look at how to give the Oxygen tabs component accordion functionality for smaller screen sizes (with the breakpoint set by the user in Oxygen)

Live Demo

Accordions are much more mobile-friendly than tabs, but basically solve the same problem of hiding away some content until the user clicks to reveal it. By ensuring that only one of the tab contents are revealed at anytime, we can mimic the same user experience for mobile.

To keep things as simple as possible, the functionality on the desktop will remain exactly the same. We'll be adding some code for the functionality we need for the accordion and then just using the Oxygen UI to set things up where we need and to customise from there.

Adding the jQuery

This bit of jQuery will handle pretty much everything. Adding extra buttons to the markup for the accordion to function correctly, ensuring the active styles are consistent across the different devices and allowing us an easy way to implement where we need it.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right