In this tutorial, I'm going to show you how you can greatly improve the UX of an accordion element in Elementor.
Specifically, you will learn how to stabilize the scroll position of the page so that it stays exactly where the clicked accordion item is.
I know the title says Scroll to Top of Elementor Accordion, however I have found this strategy to be even better UX. Let me show you.
By default, the change in height from another accordion that was previously opened above, and is now closing, is quite poor UX and makes it difficult for the user (on mobile in particular) to find the start of the accordion content he just opened.
Here is a demo of this, this is the default behaviour:
Here is what you will learn in this tutorial. This is the improved behaviour:
PS. If you are looking for an even more amazing accordion, that works on multiple row on desktop and tablet, then stacks on mobile, with dynamic data, check the Elementor Loop Grid Multi Row Accordion tutorial.
Let's get started!
First, add an HTML element on your page where you need the improved UX Elementor Accordion
If you have an accordion only on one or two page of your website, use the HTML element on those pages.
If however you want this to work automatically for all accordions on your website, create a new Elementor Custom Code snippet, and add the code there.
Now, copy paste this code in your HTML element or code snippet
<script> /* Please login to get the code * The code will be for the Elementor Accordion Scroll To Top Of Opened Accordion tutorial * Found at this URL https://element.how/elementor-accordion-scroll-to-top/ */ </script>
The code works for both the new and old Elementor accordion elements.
Finally, enjoy your new improved UX Elementor accordion
I hope you have found this tutorial helpful!
Cheers!
14 Responses
Dear,
I used your code to create the code snippet and after publishing it, I found out that it only works sometimes. When it works, it works! Thanks! But most of the times it ends up on the top of the page. Please help!
Greetings Jan,
Would you be able to share the URL where you are trying this with me? I will have a look.
I tested on Chrome, Safari MacOS, Safari iOS, and it works as expected there (with the new accordion element).
Cheers!
Thank you for your reply Maxime,
I seem to have solved the issue by NOT activating the icon. If I click on the item, then everyting works like a charm. If I click on the icon to expand the item, it randomly goes wrong and closed down the probable cause. W
Hey Jan!
Thanks for sharing that precision (that the issue was on clicking the icon). I adjusted the code to make it work regardless of if the icon or title is clicked now!
Cheers!
Thank you Maxime, appreciate your quick reply and fix! And glad to have been a help in pin-pointing to the error.
Warm regards,
Jan
Thank you Maxime,
Updated the code and it works so well. You made my day. Thank you and cheers!
Jan
That's a nice functionallity - and good for UX
Thanks Maxime!
//Lars
Welcome Lars!~
Wow thats cool.. btw, how it works with elementkits advance accordion? Can u please help?
Hey Kick!
Sorry it's too much work to adjust all of my code snippets to every addon out there... So I focus on Elementor free and Pro. Please switch your accordion to Elementor and then it should work fine!
Cheers!
It works but is there any way the process can be smooth? Like when scrolling to top it goes smoothly.!
Hi Maxime, could this work for the Elementor Tabs widget too? The tabs widget switches to an accordion for mobile devices but when I try this solution it doesn't seem to work.
Hey George!
I tested and can't see any problem with the Tabs element on mobile. They are already stabilized on the clicked tab title by default... (At least the new tabs element, which is the one I tested)
This might because I have nested elements enabled perhaps? Using the '.e-n-tab-title' selector seems to fix it but it's a little intermittent