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!