Code by Day | Explore By Weekend

How To Use A Button To Open Or Close Divi Toggle Modules Tutorial by Pee Aye Creative

How To Open And Close Divi Toggle Modules With A Button

In this tutorial I will show you how to open and close all the Divi Toggle modules on a page with the click of a button!
Categories: Divi Accordion/Toggle Divi jQuery Tutorials

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!

Subscribe On YouTube

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 class to open close Divi Toggle modules with a button

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 class to Divi Toggle modules to open and close with a button

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

Last updated Mar 8, 2022 @ 1:06 pm

That's it!

I hope you have enjoyed learning How To Open And Close Divi Toggle Modules With A Button. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Juan
    Juan on April 29, 2022 at 11:11 am

    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?

    Reply
    • Hemant Gaba
      Hemant Gaba on May 9, 2022 at 10:31 am

      Hey Juan,

      Could you please share the URL of the page in order for me to check and replicate the issue on my end?

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart