Issues with Tabs and Accordions on ipad

[RocketGirlNZ]

Hi, I’m having trouble with tabs not responding and unexpected page scrolling with both tabs and accordions. I’m using iPad Pro, unsure if regular iPad is affected. The scrolling issue also occurs on PC.

I fixed accordions not opening with code i found on another thread and can see some other suggestions of code to add, but some of it dates back to 2016 so I need help please to ensure I’m only using relevant or recent solutions.

Could you please take a look at my site?

[thai]

Hi There,

Please try adding this custom JS under X > Theme Options > JS:

jQuery(function($) {
	$('.vc_tta-panel-title a').off('click touchend touchstart');
});

Hope it helps

[RocketGirlNZ]

Thanks for that. It seems to have fixed the scrolling on accordions but tabs are unchanged - still not opening, but they do scroll.

Thanks, Sarah

[paul.r]

Hi Sarah,

For tabs, you can try adding this in Theme Options > CSS

.vc_tta-panel.vc_active .vc_tta-panel-heading {
   display:block !important;
}

Hope that helps

[RocketGirlNZ]

I don’t have access to an ipad to check it that’s fixed it on there but i’m really not liking the change I see on a regular PC. It’s added an additional tab below the others so that the tab you click on appears twice. It’s a very strange effect, not something a visitor would expect to see when they click on a tab.

It’s also still doing the weird scroll/jump and it’s worse now as it scrolls down and then jumps back up. As well as being quite unexpected, the result is that you can’t click through the tabs - you have to scroll back up each time as the tabs are no longer visible.

Am I using the wrong kind of tabs or do I have the setup wrong? The Renew demo doesn’t refer to this shortcode so I wasn’t able to see how I should be using them. Is there somewhere I can find a tutorial or walk through for the new shortcodes?

[nabeel]

Hi again,

Can you please remove both codes previously provided and use this one instead:

jQuery( function($) {
	$('.vc_tta-tab a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
	});

});

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

[RocketGirlNZ]

thank you, that’s fixed it!

[paul.r]

You’re welcome!