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!
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.
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.
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.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
<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?