Link that opens a tab within same page

Support
#1

Hello! I am working on a page that has a tab element in one of the sections. I have 3 feature boxes right above the tabs that each have a link in the text that should link to its corresponding tab below. I can see the url is adding the “#tab-x” attribute, but the tabs are not opening. I have tried lots of solutions form the forums with custom javascript. The page url is sarascottdesigner.com/business.
Can someone please help me to get this to work?
Thanks!
Sara

This is my current javascript:

(function($){
  var tabnav = location.href.split("#tab-").slice(-1)[0];
 
  if ( tabnav || tabnav != '' ) {    
   
   $( document ).ready ( function() {
 
    console.log(tabnav);
 
    var navbar = $('.x-navbar').outerHeight();
 
    $('.x-nav-tabs .x-nav-tabs-item').removeClass('active');
    $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').parent('.x-nav-tabs-item').addClass('active');
    $('.x-tab-content .x-tab-pane').removeClass('active');
    $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').addClass('active');
 
    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);
 
    $('html, body').animate({
        scrollTop: yloc
    }, 850, 'easeInOutExpo');
 
   }, 750 );
 
   } );
 
  }
 
})(jQuery);
#2

Hello There,

Glad for the very detailed post information. Based from the code, you link should be like this url: http://example.com/#tab-n where n is the tab number. At the moment, we could not really see why it is not working. There could be a conflict or invalid link somewhere else. Could you please provide the url of the page where this code is applied and the tab exist? This is to ensure that we can provide you with a tailored answer to your situation.

Thank you in advance.

#3

The url is sarascottdesigner.com/business.
Let me know if you see any errors in my code…
Thanks!

#4

Hi again,

Please replace your code with the following code:

jQuery(document).ready(function($) {
	 $('.x-feature-box-text a').on('click touchend',function(e) {
		var tabnav = $(this).attr('href').split("#tab-").slice(-1)[0];   
			var navbar = $('.x-navbar').outerHeight();
		 
			$('.x-nav-tabs .x-nav-tabs-item').removeClass('active');
			$('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').parent('.x-nav-tabs-item').addClass('active');
			$('.x-tab-content .x-tab-pane').removeClass('active');
			$('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').addClass('active');
		 
			setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
		   
			var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
			console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
			console.log('tab: ' + tabnav + ', yloc: ' + yloc);
		 
			$('html, body').animate({
				scrollTop: yloc
			}, 850, 'easeInOutExpo');
		 
		   }, 750 );
		 
	});
});

This should fix it. Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#5

Hooray - that works! I really appreciate the support!
Sara

#6

Glad to hear that. :slight_smile: