Link to Tab in the same page

Support
#1

Can you please let me know how to link to tab in the same page so the tab opens when a visitor clicks to a link in the same page.

#2

Hi There,

Thanks for writing in! Add the following Javascript code into your Theme Options > 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 links as below to refer to your respective tabs.

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

Hope that helps.

#3

Sorry but still does the same thing. Just changes the address to link#tab-5 but the tab 5 does not open.

#4

Hello There,

Please update the JS code and use this instead:

jQuery( function($){ 

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

	$( 'link_to_tab' ).on('click touchstart', 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');
		}
	}
});

Please let us know how it goes.

#5

Still the same.

#6

Hello There,

Thanks for updating in! Sorry if the code did not work out. There was a typographic error. I have resolved the issue by using this code:

jQuery( function($){ 

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

	$( '.link_to_tab' ).on('click touchstart', 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');
		}
	}
});

If you need anything else we can help you with, don’t hesitate to open another thread.

#7

Thank you. Works now.

#8

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#9

It seems that it works only if you click the second time. Then it works on the page.

#10

Hi There,

From which page that you’re sending visors to those tabs ? so that we can look into it.

Thanks!

#11

Same page where the tabs are.

#12

Hi,

You can try this code instead.

jQuery( function($){ 

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

	$( '.link_to_tab' ).on('click touchstart', function(){
        var mylink = $(this).attr("href");
		scroll_to_tab ( mylink.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');
		}
	}
});

Hope that helps.

#13

That solves the issue. Thanks for your help.

#14

You’re more than welcome, glad we could help.

Happy Holidays, Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.