Accordion Not Displaying Content at Top of Container

[Jef Gunion]

Hello  again,

I’m using a accordions in a few pages to display a team of people. In testing both vertical and horizontal layouts, everything looks great on desktop (as usual), but on mobile or any small device as you scroll down to the next tab title/name and click/tap, the content will not automatically scroll back up to the beginning of that new content (tab title) as it should for proper UE.

Here’s a test page I set up with one tabbed and one accordion group:  https://realsmartproperties.com/about-us/about-us-test/

How can this be worked around with CSS or other technique? I’ve seen this function on other plugins work very smoothly, so I know it’s possible. But I want to keep this all in Elementor if possible.

Please help asap.

Thanks!

Jef

[Danish Iqbal]

Hello Jef,

 

To fix this issue, I added the below JS to Jupiter X -> Control Panel -> Settings

 

<script>

jQuery(".elementor-tab-title").click(function(){
event.preventDefault();

var id = jQuery(this).attr('id');

var stickyHeaderHeight = jQuery(".jupiterx-header-sticky-custom").outerHeight();

var adminBarHeight = jQuery("#wpadminbar").outerHeight();

var totalExtraHeight = stickyHeaderHeight + adminBarHeight + 2;

setTimeout(function() {
$('html, body').animate({
scrollTop: $("#" + id).offset().top - totalExtraHeight
}, 700, 'swing', function () {});
}, 500);
});
</script>

 

Please clear your browser cache and let me know if you require more help with this.

 

Regards.

[Jef Gunion]

Hi Danish, the lower toggle accordion (the 3 names) fix seems to have done the trick! That’s great, thank you very much! However, is it possible to apply the same JavaScript for the top accordion toggle group with the names on the left and the content on the right?  Again, this issue is only relevant on mobile. Obviously on desktop the up-and-down motion isn’t necessary.

Thanks again! You’re a JavaScript wizard!

[Danish Iqbal]

Hello Jef,

 

Could you please share the exact URL of the site on which you have added the accordion toggle group with names on the left?

 

Unfortunately, the Elementor guys change the whole HTML on the small screens which makes it very hard to perform the correct scroll function.

 

Regards.

[Author]

Posts