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!

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

Last updated Mar 8, 2022 @ 1:06 pm

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Juan

    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

      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
  2. Ivo

    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!

    Reply
    • Hemant Gaba

      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?

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart