Openend accordion drops down the page.

Hello,

I have activated the ‘accordion’ tabs.
When you have a lot of text in one of these tabs/accordions, you will get a scroll bar.
I do not want that. So I implemented this:

.tabs-layout-accordion .wd-scroll-content {
max-height: 1000px;

And that is solved, but when you open A accordion the screen drops a bit, so you have to scroll up again to the beginning of the text in that accordion.
Look at the link I provided.

How can we fix this, so when you open a accordion, it will open/stay at the top of that accordion?

I hope you can help me fix this?

Hello,

Could you please send me a video where the screen drops a bit? Because I cannot replicate it on my side.

Here is a video: https://monosnap.com/file/dfF8tdLsNlxSJeZuzG47HscW2fqC3B

Looking forward to collaborating with you!

Kind Regards

Hello,

You opened an accordion and then closed it, then opened another one en closed it…
Please just open one and not close it, then open the next one en don’t close the previous one.

Greetings Ilona

Hello,

I see. Such happens when you have in the first accordion a huge content so the second that has much less content opens in such a way when you need to scroll a little bit.

https://monosnap.com/file/xTHEEPUNeesNPQRRZabezINi606aoD

So you need to make the content the same length in all accordions then the issue is gone.

Kind Regards

Well, not all accordions have the same text… and so not the same length… so I can not make them all the same length… So how do we solve this? Isn’t there a code or something that it will always shoot up to the beginning when opening a accordion?

It is something in your theme do, I must say…
If you go to: https://www.sohome.nl/sohome-uitschuifbare-eettafel-montreux-walnoot-180-220-x-90cm.html
And scroll down you will see they have accordions too, but they all open at the top… And all different hights and text lengths…
They can even choose which ones must be open and which ones are closed when entering the page…

On a mobile it works fine… can you help please?

Hello,

Please add the below code to the “On document ready” area in Theme Settings -> Custom JS. After that, clear the cache and check the accordions again.

(function($) {
	setTimeout(function () {
	$('.woocommerce-tabs.wd-accordion > .wd-accordion-item > .wd-accordion-title').on('click', function() {
		console.log(222);
		var $this = $(this);
		var currentIndex = $this.parent().index();
		var oldIndex = $this.parent().siblings().find('.wd-active').parent('.wd-tab-wrapper').index();

		if ($this.hasClass('wd-active') || currentIndex === -1) {
			oldIndex = currentIndex;
		}

		setTimeout(function () {
				var $header = $('.sticky-header');
					var headerHeight = $header.length > 0 ? $header.outerHeight() : 0;
					$('html, body').animate({
						scrollTop: $this.offset().top - $this.outerHeight() - headerHeight - 50
					}, 500);
			}, 300);
	});
		}, 300);
})(jQuery);

Kind Regards

Yes thanks so much!

You are welcome!

If there’s anything you need, please write me or another member of our help desk team.

We’re here for you!

Kind Regards

[Author]

Posts