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

  • Label: 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-1 

  • for the second Toggle Module, set it to be toggle-2  

  • for 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.

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>

A quick demo can be seen here: Scroll to and Open a Toggle with an Anchor Link in Divi.

Did this answer your question?