In Appearance > Menus, create a new Menu. I call it Open Toggle in my example, and then I add the menu items. I will be using three (3) menu items used for three(3) toggles.
Setting Up the Navigation Menu
For each Menu Item, I'm using the Custom Link type and set a CSS ID such as #toggle-1 and a Label such as Open Toggle 1.
For each menu item, we will have:
URL:
#toggle-1Label:
Open Toggle 1
You can use the CSS ID you want, as long as it matches the CSS ID Set for the Toggle Module. (different toggles require different IDs)
Setting up the page layout
The next step is to add our menu to the page layout and the 3 Toggles. Make sure that you have enough content on your page.
Create a Fullwidth Section or a Normal Section, insert either the Fullwidth Menu Module or the Menu module, and choose to use the menu created initially. Once each Toggle Module is placed into the page's layout, we need to set the CSS ID in the Advanced Tab > CSS ID area for each one of them.
Set the following CSS IDs:
for the first Toggle Module, set it to be
toggle-1for the second Toggle Module, set it to be
toggle-2for the third Toggle Module, set it to be
toggle-3
Go to the Fullwidth Menu module > Advanced tab > CSS Class and add the wpc-fw-menu class to the module. Here is the tutorial about adding custom CSS class.
Adding the JS code which will open the toggle module
Finally, we need to place this JS code in the Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog:
<script>
(function($) {
$(document).ready(function() {
var menuLinks = $('.wpc-fw-menu a');
$(menuLinks).on('click', function() {
var link = $(this).prop('hash');
$(link).removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
$(link + ' .et_pb_toggle_content').css('display', 'block');
});
});
})(jQuery);
</script>