Need js code snippet for navigating to specific tab

[dsthompson]

Hi, I am trying to find the js code snippet to add to global js that allows me to navigate to a spacific tab via url. I lost the code I had used before and can not seem to find it again in forum.

Th js I had before was about 5 or 6 lines so that I could add the /#tab-1 (etc) to a url to be able to go to a specific tab. Could you provide this code snippet or refer me to the article that has this code please?

Thanks

[christopher]

Hi there,

Our Classic Tab element does not support such a feature. The Javascript that I will give you is working to only set the active tab but it will not animate the page to the position of the Tab as it is very hard with the new codebase and outside of our support scope.

Please add the code below to X > Theme Options > JS:

(function($){
  var tabnav = location.href.split("#tab-").slice(-1)[0];

  if ( tabnav || tabnav != '' ) {    
    
   $(window).on( 'load', function() {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();

    $('.x-nav-tabs .x-nav-tabs-item [data-x-toggleable="' + tabnav + '"]').trigger('click');

   } );

  }
  
})(jQuery);

If you want to link to the second tab, for example, you need to add a URL like http://thewebsiteurl.com/#tab-2

Thank you.

[dsthompson]

Thank you for the reply and the snippet. I have reverted back to the 1,2,7 version in that the v2.0.x has many issues with my site. I have added the code to my global js but as I believe you are stating, the /#tab-x is not working as it did before - only navigating to the page. When you say “new codebase” does that included the v1.2.7? If so, then the navigate to tab functionality is effectively removed from the theme capabilities. Is this correct?

Thanks

[paul.r]

H,

Can you provide us your site url so we can take a closer look.

Thanks

[dsthompson]

Thanks for the reply. The site and page to is https://mysalus.org/my-home/my-wellness/#tab-3 which in this case is triggered by the sidebar link My Community Crosswalks > My Community Navigator > Manage Well-being Plan

To acces you will need credentials which I will add next.

[mldarshana]

Hi there,

I have updated with the following Javascript code and now it is properly linking to the tab.

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

Thanks!

[dsthompson]

Thanks Much, That worked.

[jade]

You’re welcome.