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

Nelson Miller Pee Aye Creative
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!

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.

add class to open close Divi Toggle modules with a button

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.

add class to Divi Toggle modules to open and close with a button

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.

    var setState;
    var close_text = "Close Toggles";
    var open_text = "Open Toggles";
    jQuery(".pa-toggle-button").on("click", function(event){

        if(jQuery(this).text() == open_text){
            setState = "open";
            setState = "close";
function toggle_tab(){
    if(setState == "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(){
                jQuery(this).parent().css("padding", "20px");
                jQuery(this).parent().siblings().css("padding", "20px");
        jQuery(".et_pb_toggle_close .et_pb_toggle_content").css("display", "none");

Last updated [last-modified %date%]


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

Blog Post Optin

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


  1. Juan

    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?

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

  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 and toggle1 is the css id?

    Thanks in advance!

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

  3. firas

    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

  4. Ragnar


    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,

  5. Trent Smith


    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.



    • Hemant Gaba

      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.

  6. Stefan

    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?


    • Hemant Gaba

      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!


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart