Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Automatically Open A Toggle Module When Linking To It

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

▶️ Please watch the video above to get all the exciting details! 👆

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. 

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.

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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

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

30 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Rafael <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    This is not working for me. I have everything like you, exept the last. I did not use the code-module, i just pasted the code to integrations in divi (head). Anchor is working, but it is not opening the toggle. :/
    You can see the case at https://configpoint.group/nis-2-richtlinien-faq/ . The Button is in the blue box. I also tried with a button module, but this also did not work (in both cases entered the class).

    Reply

Comments By Others

  1. Simon Shave

    The toggle module State setting doesn’t have any responsive controls. Would love a tutorial on how to default open on desktop / closed on mobile.

    Reply
  2. Ted Lederer

    Hello.

    On the page https://winstuff.club/ro-marley-beach-house I want to click on the Terms and Conditions link at the lower section of my entry form and have it go to the Toggle at the bottom of the page and have the toggle already expanded. I am able to do it with a button, but for a link it isn’t working. Any ideas?

    Thanks!!

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Ted!

      I can see the accordion is opening fine on clicking the term and condition link. Can you clear the cache and check again?

      Reply
  3. Alex B.

    Is there a way to link to an item inside of the toggle section? I’ve tried using named anchor links and that hasn’t worked out so far.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Alex!

      The anchor link should work fine. Can you please share the URL of the page to investigate further?

      Reply
  4. Marissa

    On click will go down the page to the toggle, but will not open the toggle… what have I missed?

    Reply
  5. Madeline Edwards

    Hi, is there a way to do this using linked text instead of a button? I couldn’t get it to work with the linked text since there is’t a place to add CSS class in each link.

    Reply
      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        Hi Andy!

        Can you share the URL of the page to investigate further?

      • Andy

        unfortunately this does not work on our site.
        My intention is to add the link to the headmenue.
        So adding the CSS class to the link in the menu doesn’t work out. Even if I am on the same page, It feels like the CSS class is not even triggered.

  6. David Harmony

    How would we open a specific section (toggle?) within an Accordion?

    Did not find this guidance in your tutorials home page. Please consider guiding us on a future tutorial?

    Use case: from a different page, link to the page with the Accordion and pop-open a section based on the anchor reference.
    myotherpage: etc …

    thank you for your wonderful talent share

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      It’s quite tricky, as the Accordion module does not have any CSS or ID fields per individual toggle item within the module. Because of that, we opted not to do a tutorial on that due to the complexity for most users.

      Reply
  7. Bülent

    Hey Nelson,

    I tried that with Avada-theme but it didn’t. Do you think it should, or did I do something wrong?

    Reply
  8. Jr

    Instead of a button I created menu links to trigger the toggles and find that on desktop it works exactly the same as using a button but on mobile it scrolls me to the toggle but does not expand. I’m not sure what I’m missing.

    Reply
  9. Yoli

    Hi Nelson,

    Great tutorial thanks, can this also work for sub-menu items, cause I cant seem to make the toggles open, maybe Im doing something wrong.

    Reply
  10. Sarah Cauble

    Is it possible to achieve this when linking from another page? I tried it with this code plus the name of the page in the link URL and couldn’t get it to work, so I’m curious. Thanks in advance!

    Reply
  11. Gaston

    Thanks Nelson, it works perfectly when using a button.

    Let’s say that I’m using a full width header module with its 2 buttons, or an hyperlink in a text module or in a toggle, is there a way to make it work ?

    Thanks,

    Gaston

    Reply
  12. tom

    I have followed the directions. The button is on one page and the toggle is on another.
    When I click on the button. it goes to the page with the toggle, and then scrolls to the toggle.

    The toggle does not open.

    What am I missing?

    Reply
  13. Mad Dog

    I can try it, but can this work or be modified to work with Tabs? I want to create links that go to the Tab and open it. The tutorials I’m finding are pretty complicated and messy and this would be so much easier.

    THANKS!

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart