Linking to a specific tab on one page from a different page

[Kellen1994]

Hello Support!

On my site, I have a “Rates” page that displays a tab element with 3 tabs. I would like to make it so that links on other pages of my site that direct to my Rates page correspond with specific tabs in my tab element. For example, my “Teaching and Mentoring” page would link to my Rates page with the “Teaching and Mentoring” tab open (Tab #2). The way it is now, the first tab is always open.

I do realize that others have submitted this topic on the forum, but none of the suggested solutions have completely worked out for me. As of this moment, I’ve been able to make it so that my links direct to the Rates page and scroll down to the tab element, but without opening the correct tab. Take the following link, for instance: https://thomasholmlegalconsulting.com/rates/#tab-2.

I am using this Custom JS code that I found from an older topic submitted on the forum, and have added class=“link_to_tab” to all of my links/CTA elements:

jQuery( function($){
$( document ).ready( function(){
scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});

$(’.link_to_tab a’).on( ‘click’, function( e ){
var window_base = location.href.split("#").slice(0)[0];
var url_base = $( this ).attr(‘href’).split("#").slice(0)[0];
if ( window_base == url_base ) {
scroll_to_tab ( $( this ).attr(‘href’).split("#").slice(-1)[0] );
e.preventDefault();
}

});

function scroll_to_tab ( tab_id ) {
console.log(tab_id);
var tab_nav = $(’.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="’ + tab_id + ‘"]’);
if(tab_nav.length >=1) {
$( tab_nav ).trigger(‘click’);
$(‘html,body’).stop().animate({scrollTop: $(tab_nav).offset().top - ( $(’.x-navbar’).height() + 50 ) },700 ,‘swing’);}
}
});

I greatly appreciate any and all help with this matter!

Thank you,
Kellen

[mldarshana]

Hi There,

Thanks for writing in! Use the following code and add it into your Customizer, Custom > Edit Global JavaScript section.

jQuery( function($){ 

	$( window ).on('load resize', function(){
		scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
	});

	function scroll_to_tab ( tab_id ) { 
		console.log(tab_id);
		var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
		if(tab_nav.length >=1) {
			$( tab_nav ).trigger('click');
			$('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
		}
	}
});

Then you can use llinks as below to refer to your respective tabs.

For example:
example.com/your-page/#tab-2

Hope that helps.

[Kellen1994]

Thank you so much, mldarshana! I tried out the code and it seems to have worked! Much appreciated.

[basanta]

You are most welcome!

Thanks