You can use hyperlinks (text links, menu items, and buttons) to open different Toggle Modules located on the same page as the links.
Note: The Links and the Toggle module should be on the same page.
Open the Toggle Modules using Menu Links
Go to WordPress Dashboard → Appearance → Menus
Create or Edit an existing WordPress Menu
Add the links using the Custom Links option
For each Custom Link, add the Label and the URL
Link Text - could be any text you want. For example: Open Toggle 1
URL: will be the CSS ID of the Toggle menu. For example: #toggle-1
Save the Menu
Notes:
You can use anything for the CSS ID as long as it matches the CSS ID Set for the Toggle Module. (different toggles require different IDs)
Make sure that each CSS ID is unique. You cannot have the same CSS ID used more than once on the same page
A CSS ID cannot start with a number
Setting up the page layout
With the WordPress Menu created, the next step is to add it to the page layout and the 3 Toggle Modules.
Notes:
You can also use Divi's Standard Menu and set it to display the WordPress menu containing the Custom Links created previously, or you can add a new Menu module in the page layout.
For best results, ensure you have enough content on your page.
In your page layout, insert the Menu module. You can use either a Regular Section or a Fullwidth Section (depending on your needs)
Set the Menu module to display the WordPress Menu created previously
Open the Menu module settings, and in Advanced Tab → CSS ID & Classes → CSS Class, type in dt-fw-menu. This is a CSS class that is going to be attached to the Menu module and later will be used in a custom JS code.
Add the three Toggle modules to your page layout
For each Toggle module, in Advanced Tab → CSS ID & Classes → CSS ID, set the correct IDs:
toggle-1 - for the first Toggle module
toggle-2 - for the second Toggle module
toggle-3 - for the third Toggle module
Adding the JS code, which will open the toggle module
Go to Divi → Theme Option → Integration tab → Header
Paste in the following JS code:
<script>
(function ($) {
$(document).ready(function () {
var menuLinks = $('.dt-fw-menu a, #top-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>