In this tutorial will show you how to add a "toggle all" open / close button that will open or close all the Elementor toggle that are in a given section or container.
See the demo here:
Features:
- Toggle all the toggles open or closed
- Change the colors of the toggle all button to your liking
- It works with sections and containers
- It works for two or more sets of toggles in the same section / container (as seen in the demo)
- You can have other independent sections / containers with toggle all buttons, that will control their own set of toggles.
Let's get started!
First, prepare your page with Elementor toggles
This is a premium tutorial. Purchase access to unlock the full tutorial.
12 Responses
Thanks for the tutorial. I may be missing it in the code, but is there a way to default to all toggles open on page load?
You can add this line of code :
$('.toggler_all').click();Right here :
Let me know if that works!
Works perfectly - thanks for the quick response
HI Maxime. I have found this tutorial really useful on a number of websites. Thanks so much.
On a page I am just building, I use toggles for FAQs and the code you provided. All FAQs are open on page load. Now, I need to link text on the same page to specific FAQs. I tried the code you provide here - https://element.how/elementor-open-specific-tab-toggle-accordion/. It works, but the toggle closes instead of remaining open. I am not a coder. Thanks for any help you can provide.
Greetings!
Delete this line in the code:
Cheers!
Works perfectly - thanks Maxime.
That is, in the code from that other tutorial. Not from the current tutorial.
Hey there -
This is *almost* very very helpful! But I have a long page full of toggles that are divided into multiple sections and inner sections. Is there a way to make this work without redesigning the entire page layout? Thanks!
https://yardeniid.wpengine.com/our-charts/
Hey Steve!
Use this code instead:
<script> document.addEventListener('DOMContentLoaded', function() { jQuery(function($) { $('.toggler_all').click(function() { let tabContents = $('.elementor-tab-content'); let tabTitles = $('.elementor-tab-title'); if (!$('.toggler_all')[0].checked) { tabContents.slideUp(); tabContents.removeClass('elementor-active'); tabContents.attr("hidden", "hidden"); setTimeout(function() { tabContents.removeClass('same-height'); }, 400); tabTitles.removeClass('elementor-active'); tabTitles.attr('aria-expanded', false); tabTitles.attr('aria-selected', false); tabTitles.attr('tabindex', -1); } else { tabContents.addClass('same-height'); tabContents.slideDown(); tabContents.addClass('elementor-active'); tabTitles.addClass('elementor-active'); tabTitles.attr('aria-expanded', true); tabTitles.attr('aria-selected', true); tabTitles.attr('tabindex', 0); } }); }); }); </script>Cheers!
Thanks, Maxime! I found a very similar solution myself.
Cheers! Great content here.
Nevermind, I figured it out. I would like to post the adjusted JS for anyone else to use, but I am getting a 403 error when trying to comment it here.
Hey Steve!
You can share your JS, just omit the script tags!
Cheers!