How to open a specific toggle item by default in Elementor?

In this article, you will learn a technique to make your Elementor Toggles open by default.

By default, Elementor Toggles are usually closed, meaning that visitors to your website would have to click on them to reveal the content within. However, you may have certain scenarios where you want specific Toggles to be open from the start, providing a better user experience or highlighting important information.

Add an HTML element

Copy and add the following code to an HTML element on the same page as your toggling element.

window.addEventListener('load', function () {
let opened = [2, 3, 4];
setTimeout(function () {
let toggles = document.querySelectorAll('.TabOpenedByDefault .elementor-tab-title');
opened.forEach((i) => {
if (toggles[i - 1]) toggles[i - 1].click();
}, 300);


Edit the code

On line 3, you can change let opened = [2, 3, 4] to which ever tabs, you want opened by default. in the example above, it’s tab 2, 3 and 4.

If you just want only tab 2 to open by default, just place 2 between the brackets. Example shown below:

					let opened = [2];

Add the class name

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


Example of the opened toggle item

Some text here in toggle 1

Some other text here in toggle 2

Some other text here in toggle 3

Some other text here in toggle 4

Some other text here in toggle 5


Opening a specific toggle item in Elementor can significantly enhance the user experience on your website. With the step-by-step guide provided above, you now have the knowledge to control which toggle items are visible by default. Deliver an interactive and engaging website for your visitors.

Share This

Please Donate

If my how-to tutorials helped you, please consider making a donation. ☕ ☕


Need affordable cPanel hosting?

Leave a Reply

Your email address will not be published. Required fields are marked *