Elementor Accordion Scroll To Top Of Opened Accordion
Get Premium

Elementor Accordion Scroll To Top Of Opened Accordion

Element.How also offers premium tutorials! Check them here:

Elementor Accordion Scroll To Top Of Opened Accordion

Table of Contents

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.

Elementor Accordion Scroll To Top Of Opened Accordion 1

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!

Elementor Accordion Scroll To Top Of Opened Accordion

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

26 Responses

  1. 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!

    1. 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!

  2. 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

    1. 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!

  3. 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

    1. 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!

  8. 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.

    1. 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)

      1. 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

      1. I think elementor has this option by default now... It does not change anything between the default and the improved behaviour on this page. I was looking for the scroll to top of the accordion tab option as the title mentions.

    3. That's not even an Elementor website... sorry this tutorial is for the Elementor accordion element specifically.

      PS. in the video you see no differences because you close the accordions first before opening another... Try not closing others first. You will see the difference.

    1. Greetings KC!

      Yes.

      Add this line of code:

      if (window.innerWidth > 767) return;

      directly after this line:

      document.addEventListener("DOMContentLoaded", function () {

      Cheers!

    1. This is due to an update from Elementor in fronted.css/min.css where:
      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }
      which causes the scroll to behave unexpectedly.
      By adding the code
      document.documentElement.style.scrollBehavior = "auto";
      above the line of code accordionTitles.forEach((title) => {
      that should be fine

Leave a Reply