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.
<script>
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);
});
</script>
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:
TabOpenedByDefault
Example of the opened toggle item
Conclusion
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.
