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 ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: