Open Toggle With Link
We have a lot of toggle and according tutorials, but there is always room for more! This one is great for FAQ sections to link from a list of questions to a list of Toggle modules and automatically open the toggle. So in the tutorial I will show you how to automatically scroll to and open a Divi Toggle module by linking to it.
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.
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.
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.
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>
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!
Tabs would be a little different, we will check on this for a future tutorial. Our Divi Tabs Maker does have a deeplinking feature for that though! 🙂
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?
From another page it needs different code. But I found this online: https://gist.github.com/Garconis/440d5e8f9a42b762c1ae29e6de46f180
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
I would think so, it should not matter the origin of the proper HTML hyperlink.
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!
Hi Sarah!
We’re working on it and should update the guide soon.
Thank you!
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.
This tutorial is specifically for the Toggle module, we don’t have any similar for the menu module at this time.
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.
Hey Nelson,
I tried that with Avada-theme but it didn’t. Do you think it should, or did I do something wrong?
Try the Divi Theme and that might make a bit more sense with the tutorial 😉
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
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.
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.
Hi Madeline!
The linked HTML should be as follow:
My text
Let me know how it goes!