Hello, I was wondering if I could somehow associate tabs that I create in the tab widget with direct links.
Say for instance, I have a tab widget on a page, say the “About” page. Could I associate each tab I create in the widget to a specific url name - Ex. My about page would be say - “https://mysite.com/about” and my tab URLs would be “https://mysite.com/about/#tab1” , “https://mysite.com/about/#tab2”, etc. So if I put in a tab url directly into the browser, the page would load up and show the appropriate tab opened on the page.
I see this code needs to be in the Global JS area, but apart from that, what do I do to my widget to get it to work with this code?
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');
}
}
});
Peter