Elementor Tabs, Toggle & Accordion Open Those Wanted On Load

In this tutorial I'm going to show you how to open your Elementor Toggles or Accordions by default. You will be able to select specifically which toggles you want opened by default, and which toggles should stay closed.

For example, you can open toggle 1, 3 and 5, as seen in this example:

Please note that with the accordion element, you can only open one at a time. This tutorial will help you open a different one than the first. It won't open more than one.

Let's get started!

First, copy paste this Elementor toggle opened by default code

Add an HTML element on the same page as your accordion or toggle element, and add this code in it.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs, Toggle & Accordion Open Those Wanted On Load tutorial 
 * Found at this URL https://element.how/elementor-toggle-open-by-default/ 
 */ 
</script>

Edit the code to add the Elementor toggles you want to be opened by default

In the code, you will see this line:

let opened = [1, 3, 5];

This means that toggle 1, 3 and 5 will be opened by default.

If you want toggle 1 only to be opened on page load, you would use this:

let opened = [1];

And if you want toggle 2 and 6, this:

let opened = [2, 6];

Now, add the class name to your Elementor toggle element

Go to your tabs, accordion or toggle element, and under Advanced > CSS Classes, give it this class name:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs, Toggle & Accordion Open Those Wanted On Load tutorial 
 * Found at this URL https://element.how/elementor-toggle-open-by-default/ 
 */ 
</script>

Finally, enjoy your Elementor toggle opening by default!

Yep, it's that simple with the proper code.

Cheers!