How To Automatically Open A Toggle Module When Linking To It Tutorial by Pee Aye Creative

How To Automatically Open A Toggle Module When Linking To It

In this tutorial I will show you how to automatically scroll to and open a Divi Toggle module by clicking a link or button.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS ID To The Toggle Modules

The first thing to do is add a custom CSS ID to the Divi Toggle modules that you want to open. Each toggle ID must be unique. So you could do something like pa_toggle_1 in the first one, pa_toggle_2 in the second one, and so on. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the ID in the CSS ID input field of each Toggle module.

add a custom CSS ID in the toggle module to open on link

2. Add The CSS ID In The Link

Next you need to match the link to the toggle by using the same CSS ID in a button or other link. You just need to add the CSS ID as the anchor link. Clicking this link will just scroll down the page to the Toggle and open it!

If you are using a Button module, open the settings and go to the Link toggle and place the same CSS ID used in the Toggle module into the Button Link URL field.

link to a toggle by adding the custom CSS ID in a button module link field

3. Add A CSS Class To The Buttons

In the same button module, go to the Advanced tab to the CSS ID & Classes toggle and place the class “pa_toggle_buttons” into the CSS Class input field.

add link to buttons that open toggle modules

4. Add The jQuery Snippet To Open The Toggles

The last step is to add the jQuery snippet below to your website. This snippet does the work of opening the toggle modules when you click the button/link. 

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(){
    jQuery(".pa_toggle_buttons").each(function(){
        jQuery(this).on("click", function(){
            var id = jQuery(this).attr("href");
            if(jQuery(id).hasClass("et_pb_toggle_close")){
                jQuery(id).children(".et_pb_toggle_title").click();
                
            }
        })
    })
})
</script>

Last updated Aug 29, 2022 @ 11:40 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

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart