Open & Close All Toggles
We’re kind of on a roll here with toggle related tutorials, so let’s keep going! In this week’s tutorial, I am showing you how to open and close Divi Toggle modules with the click of a button. This is great for FAQs sections when you want to either open them all to actually read them or close them all to clean up. I hope you enjoy as always!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
1. Add A Button Module With Custom CSS Class
The first thing you need is a button, so go ahead and add a Divi Button module. In the button, add the text “Open Toggles” and style the button however you want. Then the last important thing is to add a custom CSS class, which is used to make the button trigger the toggle. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-button” in the CSS Class input field of the Toggle module.
2. Add A Custom CSS Class To The Toggle Modules
The second thing to do is add a custom class to the Divi Toggle modules that you want to open and close with the button. This is used so that every toggle on the site or page is not affected, but just the ones with this class. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-open-close” in the CSS Class input field of the Toggle module.
3. Add The jQuery Snippet To Open & Close The Toggles
The last step is to add the jQuery snippet below to your website. This snippet does the work of opening and closing your toggle modules when you click the button. The code connects the button module and toggles and applies the effect.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function(){
var setState;
var close_text = "Close Toggles";
var open_text = "Open Toggles";
jQuery(".pa-toggle-button").on("click", function(event){
event.preventDefault();
if(jQuery(this).text() == open_text){
setState = "open";
toggle_tab();
}else{
setState = "close";
toggle_tab();
}
})
function toggle_tab(){
if(setState == "open"){
jQuery(".pa-toggle-button").text(close_text);
jQuery(".pa-toggle-open-close.et_pb_toggle").removeClass("et_pb_toggle_close");
jQuery(".pa-toggle-open-close.et_pb_toggle").addClass("et_pb_toggle_open");
jQuery(".et_pb_toggle_open .et_pb_toggle_content").css("display", "block");
jQuery(".et_pb_toggle_open .et_pb_toggle_title").addClass("all_on");
jQuery(".all_on").on("click", function(){
if(jQuery(this).parent().hasClass("et_pb_toggle_open")){
jQuery(".pa-toggle-button").text(close_text);
jQuery(this).parent().removeClass("et_pb_toggle_open");
jQuery(this).parent().removeClass("et_pb_toggle_close");
jQuery(this).parent().css("padding", "20px");
jQuery(this).parent().siblings().removeClass("et_pb_toggle_close");
jQuery(this).parent().siblings().removeClass("et_pb_toggle_open");
jQuery(this).parent().siblings().css("padding", "20px");
}else{
jQuery(".pa-toggle-button").text(open_text);
}
jQuery(this).removeClass("all_on");
})
}else{
jQuery(".pa-toggle-button").text(open_text);
jQuery(".pa-toggle-open-close.et_pb_toggle").removeClass("et_pb_toggle_open");
jQuery(".pa-toggle-open-close.et_pb_toggle").addClass("et_pb_toggle_close");
jQuery(".et_pb_toggle_close .et_pb_toggle_content").css("display", "none");
}
}
})
</script>
Hi!
Great content!
I have an issue when the toggle element opens and it goes under the bottom of the screen it makes the page jump up to other section!
Have you ever seen that?
Hey Juan,
Could you please share the URL of the page in order for me to check and replicate the issue on my end?
Hi, love your how-to’s and Divi developments.
Is there a way to expand this code to also have toggles open when you use an url with anchorpoint?
So, open the toggle if you use http://www.yoursite.com/#toggle1 and toggle1 is the css id?
Thanks in advance!
Hey Ivo,
Could you setup a button and link that with the URL where the toggle is present with the toggle ID and share the URL of the page where you have placed the button?
could you help me to manage the same thing but I need to open the toggle when I click on an image ?
thank you in advance <3 keep the good work bro you are the best
I assume you could place the link in the image link settings?
Hello,
Great tutorial, thanks. 🙂
All works but the setup at the moment is that all toggles on the page will open at the same click,
I have three different toggles, every toggle has its own button.
Is there a way to make buttons independent from each other?
Thanks in advance,
That’s the point of the tutorial 🙂 And I think if you needed a button for each, why not just open each one? Otherwise I don’t know.
Nelson,
Thanks for the tutorial. I am trying this on a website that I’m currently revising. It works, but a couple of weird things are happening. The things I’ll describe below happen when I’ve used the Open Toggles button at least once, and then start individually opening and closing the toggles. What I find is that (1) the toggles, which were set to have a light background color when closed or open, turn white (but then it fixes if you click on the toggle once or twice), and (2) it seems to add extra padding between modules on the page. One caveat is that the page is still in preview mode, not having been published yet while I iron out all the changes to content and style that I am making.
Thx,
Trent
Hi Trent!
If the page is published, could you please share the URL of the website? It will help me to understand the issue better.
Great help, thanks!
I need this case for an image instead of an Button. You allready answeared that this works with the Image link option. But how can i find the link to the toggle?
Thanks!
Stefan
Hi Stefan!
Add the ‘#’ in Image settings > Content > Link and the class pa-toggle-button in the Image module.
Let me know how it goes!