Visual Composer - Tabs + Accordion Page Jumps

Support
#1

Hello!

I am having an issue where both my Accordions and Tabs in my pages look fine while in the VC frontend editor, but are doing something weird script wise on the live version of the page. When you click on the Accordion it will jump to the bottom of the page. On the tab element, it will actually open fine, but when you try to collapse the html I’ve written into the tab, it will jump to the bottom of the page again. Let me know if you need my credentials for this one. Also, here are the links to the pages that are acting up.

Thanks!

#2

Hello There,

Thanks for writing in! I have inspected the pages and there is a JS error on the page. This could be the cause of the issue. I noticed that you added a custom script and it displays in the frontend as this:

<script id="x-footer-custom-scripts" type="text/javascript"><script type="text/javascript">_satellite.pageBottom();</script></script>

The correct one should only be this:

<script id="x-footer-custom-scripts" type="text/javascript">_satellite.pageBottom();</script>

We would loved to know if this has work for you. Thank you.

#3

Nope :confused: This did not solve the issue. Anything else you could recommend?

#4

Hello There,

I have taken further investigation and I think this is conflict between the tabs/accordions and the custom header not recognizing the two fixed bars. I’ve submitted this to our issue tracker so the developers will be made aware of it.

Please bear with us.

#5

Okay, just let me know if there is anything else you can figure out.

Thanks

#6

You’re welcome.

#7

Any update on this? It’s happening with the Accordion, Tabs, and Tour elements. Basically makes them entirely unusable. Please let me know if there is anything I can do.

#8

Hi @nyastremski,

To fix your issue, please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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!

#9

This WORKED!!! Very Exciting! Just one other thing. On http://www.asti.com/livelablearning/livelabcourses/ this page, I added some custom HTML to create a faux dropdown for the options inside of the tabs (basically a dropdown within a dropdown) however, the same thing is happening when you try to un-collapse the options back onto themselves. If you mess with it for a second, you will see what I’m talking about. Is there another piece of code that could fix this as well?

Just let me know. If not, you guys have been awesome!

#10

Hi again,

To fix your other issue, please add this code as well:

jQuery( function($) {
	$('.wpb_wrapper a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.wpb_wrapper a').off('click touchstart touchend');
	});

});

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.