Button to link to different tab on same page

[markw1]

Hi there,

I have 3 tabs on a page, and I want to add buttons to the bottom to direct person to next tab

i.e. to open tab and scroll to top.

I found a few post about this, but its not quite working.
https://theme.co/apex/forum/t/link-to-tab-in-the-same-page/18331
https://theme.co/apex/forum/t/link-that-opens-a-tab-within-same-page/4668

It looks like the Tab element in a recent pro update has changed ID to legacy.

Can you help.

Code I have in javascript is:

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');
	}
}
});

Will post page this is on, in private reply.

Many thanks

[jade]

Hi there,

Please try this code:

jQuery( function($){ 

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

$( '.link_to_tab' ).on('click touchstart', function(){
    var mylink = $(this).attr("href");
	scroll_to_tab ( mylink.split("#x-legacy-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-x-toggleable="' + 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 please make sure to link the buttons to IDs #x-legacy-tab-n just like the button on the first tab and not #tab-n.

Also, please note that this is a custom code that is based on your current setup and there is a possibility that this might break in case you will update or change the structure of your page or in case something will change after an update. It will be your responsibility to update and maintain the code accordingly as this goes beyond the scope of our support.

Thank you.

[markw1]

@Jade,

Awesome - all working perfectly thanks

[Prasant]

You are most welcome.