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 $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?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: