Link to Tabs in Oxygen Builder

YouTube video

Written By

Jonathan Jernigan

This tutorial will provide you some relatively simple JavaScript code to add in Oxygen Builder so that you can enable linking to tabs on the front end. If you have a tabs component on a page and want to be able to link directly to an inner tab, you can do that with this code below.

Add code below in a code block in the JavaScript tab inside Oxygen.

var pathname = window.location.href;

jQuery(document).ready( function() {

function tab_reset() {

    //Remove active state from all tabs
    jQuery('.oxy-tabs-wrapper > *').removeClass('tabs-1086-tab-active');

    //Hide all tab contents
    jQuery('.oxy-tabs-contents-wrapper > *').addClass('oxy-tabs-contents-content-hidden');

}

if( pathname.includes('#account') ) {

    tab_reset();

    jQuery('#_tab-12-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-19-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#posts') ) {

    tab_reset();

    jQuery('#_tab-13-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-20-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#downloads') ) {

    tab_reset();

    jQuery('#_tab-14-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-21-12').removeClass('oxy-tabs-contents-content-hidden');

} else if ( pathname.includes('#membership') ) {

    tab_reset();

    jQuery('#_tab-15-12').addClass('tabs-1086-tab-active');
    jQuery('#_tab_content-22-12').removeClass('oxy-tabs-contents-content-hidden');

} 
  
});

 

Learn more about my Oxygen Builder course here: https://jonathanjernigan.com/ultimate-oxygen-course/

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.