How to Scroll to and Open a Toggle with Anchors Link Located on the Same Page Using Divi

Creating a seamless and interactive user experience on your website can greatly enhance visitor engagement. One effective way to do this in Divi is by using anchor links to scroll to and open specific Toggle Modules on the same page.

This functionality allows users to navigate directly to the information they need, improving the overall usability of your site.

This article will guide you through the steps to set up anchor links that scroll to and open Toggle Modules, providing visitors a smooth and efficient browsing experience.

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
1. Link Text - could be any text you want. For example: Open Toggle 1
2. 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:
1. toggle-1 - for the first Toggle module
2. toggle-2 - for the second Toggle module
3. 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>