Visual Composer Tabs (pageable container) issue

Support
#1

Hi,

I’m trying to find a way to link to an individual tab item from a link (either button or standard href).

I found an article which helped but I’m still having issues. The article is this one: https://theme.co/apex/forums/topic/links-to-nav-tabs/

I’ve used your jquery and made a subtle amendment to stop the animation at the end. I’ve also had to implement separate jquery from a different article to stop the container scrolling automatically.

The issue I’m having is - your solution almost works in the article mentioned above, except when clicked, it scrolls through all the tabs and stops on the last one - whereas it needs to only link to the tab in the link, then stop on that particular tab.

Here is the code I’ve used from your previous articles;

//STOPS SCREEN SCROLLING ON TAB CLICK
jQuery(function($){

$(’.vc_tta-tabs-list a,.vc_tta-tabs-list li’).on(‘click’, function(){
setTimeout( function() {
$(‘html, body’).stop();
}, 100 );
});
});

//ALTERNATIVE JQUERY TO PREVENT SCROLLING ON TAB CLICK

jQuery( function($) {

$(document).on(‘click’, ‘li.vc_tta-tab a’, function( e ){
$(‘html, body’).stop();
});
$(document).on(‘click’, ‘li’, function( e ){
$(‘html, body’).stop();
});
$(document).on(‘click’, ‘.vc_tta-panel-title’, function( e ){
$(‘html, body’).stop();
});
});

//LINK TO TAB SECTION FROM HREF WITH CSS CLASS link_to_tab -important
//SCROLLS THROUGH ALL TABS THOUGH

jQuery(window).load(function() {
x_scroll_to_tab(jQuery);
});

jQuery(function($){
$(’.link_to_tab’).live(‘click’, function(e){
e.preventDefault();
x_scroll_to_tab($);
});
});

function x_scroll_to_tab($) {
var tab_nav = $(’.vc_tta-tabs-list a,.vc_tta-tabs-list li[href="#’ + location.href.split("#").slice(-1)[0] + ‘"]’);
$(tab_nav).click();
setTimeout( function()
{
$(‘html, body’).stop();
}, 100 );

}

Thanks in advance for your assistance - if you need login credentials please let me know. It’s a production site so not visible to the public at present.

Regards

Steve

#2

Hi Steve,

To help you better with this we need to check the page URL where the tab is added. If in case your site is under construction, you may share site URL and credentials using a secure note. Thank you.

#3

Hi,

Thanks for your reply - I managed to use a solution from another member from a while ago to achieve the same using the accordion - so I modified it to work with the vertical tabs (tour). If it’s useful for anyone else, the code below will allow a href link to access any tour section.

The article I used;

The code;

 //LINK TO TOUR SECTION WITH HREF
jQuery(function($){

	$(document).ready(function(){ jump_to_tab( $, $('.vc_tta-tabs-list li .vc_tta-tabs-list a[href="#' + location.href.split("#").slice(-1)[0] + '"], .vc_tta-panel-title > a[href="#' + location.href.split("#").slice(-1)[0] + '"]') ); });
	$('.enable_jump_to').click( function(e){ e.preventDefault(); jump_to_tab($, $('.vc_tta-tabs-list li .vc_tta-tabs-list a[href="' + $(this).attr('data-jump-target') + '"], .vc_tta-panel-title > a[href="' + $(this).attr('data-jump-target') + '"]') ); } );

});

function jump_to_tab($, tab_nav) {
			if(tab_nav.length >=1) {
	            $(tab_nav).click();
	            //$('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
              setTimeout( function() 
          {
            $('html, body').stop();
           }, 100 );
        
        	}
}

Regards

Steve

#4

Thanks for sharing the solution, Steve.