Docs

[dthom]

Hi, I have followed the various articles on this topic which have been helpful but I still can not get my url reference with the /?#tab-3 (different page from where tabs are located) to work. I have added the following code to both my customizer and to my child theme.

add_action(‘wp_footer’,’cmk_set_active_tabs’);
function cmk_set_active_tabs() {

//Add Javascript if ?tab is added in the URL
if ( isset($_GET[‘tab’]) ) {
echo “\n”.'<script>’.”\n”.'(function($){‘.”\n”;

/*Remove Active class in both Tab Nav and Tab content*/
echo “\t”.’$(“.page-id-177 .x-tab-content .x-tab-pane, .page-id-177 .x-nav-tabs .x-nav-tabs-item”).removeClass(“active”);’.”\n”;

//Add Active class on First tab nav and tab content if ?tab=1 found in url
if( isset($_GET[‘tab’]) && $_GET[‘tab’] == ‘1’ ) {
echo “\t”.’$(“.page-id-177 .x-tab-content .x-tab-pane:first-of-type, .x-nav-tabs .x-nav-tabs-item:first-of-type”).addClass(“active”);’.”\n”;
}
//Add Active class on Second tab nav and tab content if ?tab=2 found in url
if ( isset($_GET[‘tab’]) && $_GET[‘tab’] == ‘2’ ) {
echo “\t”.’$(“.page-id-177 .x-tab-content .x-tab-pane:nth-of-type(2), .x-nav-tabs .x-nav-tabs-item:nth-of-type(2)”).addClass(“active”);’.”\n”;
}
//Add Active class on Secont tab nav and tab content if ?tab=3 found in url
if ( isset($_GET[‘tab’]) && $_GET[‘tab’] == ‘3’ ) {
echo “\t”.’$(“.page-id-177 .x-tab-content .x-tab-pane:nth-of-type(3), .x-nav-tabs .x-nav-tabs-item:nth-of-type(3)”).addClass(“active”);’.”\n”;
}

‘})(jQuery)’.”\n”.'</script>’.”\n”;
}
}

I have setup my tabs as follows:

[x_tab_nav type=”three-up” float=”none”][x_tab_nav_item title=”Tab1″ active=”true”][x_tab_nav_item title=”Tab2″ active=””][x_tab_nav_item title=”Tab3″ active=””][/x_tab_nav]

[x_tabs id=””]
[x_tab active=”” id=”#Tab-1″]Something here[/x_tab]
[x_tab active=”” id=”#Tab-2″]Or here[/x_tab]
[x_tab active=”” id=”#Tab-3″]But not here[/x_tab]

[/x_tabs]

I feel I am close but can’t seem to get the urls to trigger the chosen tab as active.

Thanks in advance for your help.

[Rahul]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[dthom]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications! It turns out that you have added a PHP code in the custom JS section which is not correct. You need to remove the code from the customizer. And then please go to Appearance > Editor and insert this following code in your child theme’s functions.php file.

add_action('wp_footer','cmk_set_active_tabs');
function cmk_set_active_tabs() {
    
    //Add Javascript if ?tab is added in the URL
    if ( isset($_GET['tab']) ) {
        echo "\n".'<script>'."\n";
		
        // Remove Active class in both Tab Nav and Tab content
        echo "\t".'$(".x-tab-content .x-tab-pane, .x-nav-tabs .x-nav-tabs-item").removeClass("active");'."\n"; 

        //Add Active class on First tab nav and tab content if ?tab=1 found in url
        if( isset($_GET['tab']) && $_GET['tab'] == '1' ) {
            echo "\t".'$(".x-tab-content .x-tab-pane:first-of-type, .x-nav-tabs .x-nav-tabs-item:first-of-type").addClass("active");'."\n";
        } 
        //Add Active class on Second tab nav and tab content if ?tab=2 found in url
        if ( isset($_GET['tab']) && $_GET['tab'] == '2' ) {
            echo "\t".'$(".x-tab-content .x-tab-pane:nth-of-type(2), .x-nav-tabs .x-nav-tabs-item:nth-of-type(2)").addClass("active");'."\n";
        }
        //Add Active class on Third tab nav and tab content if ?tab=3 found in url
        if ( isset($_GET['tab']) && $_GET['tab'] == '3' ) {
            echo "\t".'$(".x-tab-content .x-tab-pane:nth-of-type(3), .x-nav-tabs .x-nav-tabs-item:nth-of-type(3)").addClass("active");'."\n";
        }
		
        echo '</script>'."\n";
    }
} 

Please let us know if this works out for you.

[dthom]

Thanks for that. Have made changes. Here are how I have the tabs labeled but don’t think its right

[x_tabs ]
[x_tab active=”” id=”#Tab-1″]Something here[/x_tab]
[x_tab active=”” id=”#Tab-2″]Or here[/x_tab]
[x_tab active=”” id=”#Tab-3″]But not here[/x_tab]
[/x_tabs]

Please advise.

Thanks

[Rad]

Hi there,

It will no longer work, tab structure is different now. Please check this thread, https://community.theme.co/forums/topic/opening-specific-tabs-with-linksbuttons/?replyto=867962#post-881667

Thanks!

[dthom]

Thanks, that did the trick.

[Christopher]

You’re welcome.

[Author]

Posts