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!
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>
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!