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.
▶️ 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.
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.
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>
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).
It looks like you are using a different module, try the Button module.