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

Closing All Tabs on Page Load in Oxygen

David Browne

By default, when using Oxygen's tabs component, the first tab's content is visible when the page loads. In this members-only tutorial we'll look at how to set it up so all the tabs content are closed by default.

The way Oxygen hides the content inside the tabs is to add a class 'oxy-tabs-contents-content-hidden' to all the tabs content apart from the very first one. When a user clicks a new tab, the 'oxy-tabs-contents-content-hidden' class is then removed from that tab content and that is what causes the content to be revealed.

Closing all Tabs by Default

The way to make sure no tab content is visible on page load is to make sure that class is added to all of the tabs content when the page first loads. Then when the user clicks the first tab (or any of them), the class will just be removed for that individual tab content and will be revealed.

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.