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)
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.