Open a Toggle Module when Linking to the Page

|

Divi includes a Toggle module which lets you display a content in an expandable box. The toggle module can be configured to start open or closed. But if you'd like to be able to selectively open the toggle module when linking from another page, here's how to do it.

Open a Toggle Module by Link using jQuery

Setup

First, give your toggle module a CSS ID, such as "mytoggle" at:

Toggle Settings > Advanced > CSS ID & Classes > CSS ID

Option 1: Open the toggle without scrolling to it

If you'd like to open the toggle, but remain at the top of the page (i.e. don't scroll down to the toggle), then add the following jQuery code to your site:

<script>
/* Open a Toggle Module when Linking to the Page */
/* https://divibooster.com/open-a-toggle-module-when-linking-to-the-page/ */
jQuery(function($) {
	setTimeout(function(){
		var query = window.location.search.substring(1);
		var params = query.split('&');
		var toggle_id = '';
		for (var i = 0; i < params.length; i++) {
			var param = params[i].split('=');
			if (param[0] !== undefined && param[1] !== undefined) {
				param[1] = decodeURIComponent(param[1]);
				if (param[0] === 'toggle' && /^[a-zA-Z0-9]+$/.test(param[1])) {
					toggle_id = param[1];
				}
			}
		}
		if (toggle_id !== '') {
			$('#'+toggle_id+'.et_pb_toggle .et_pb_toggle_title').trigger('click');
		}
	}, 100);
});
</script>

Now you'll be able to open the toggle when linking to the page containing it, by including a "toggle" parameter in the URL with the ID of your toggle. So, for example, your link to the page might look something like this:

https://divibooster.com/some-page/?toggle=mytoggle

Option 2: Open the toggle and scroll to it

If you'd like to open the toggle and have the page scroll to it, then add the following jQuery code to your site:

<script>
/* Open and scroll to a Toggle Module when Linking to the Page */
/* https://divibooster.com/open-a-toggle-module-when-linking-to-the-page/ */
jQuery(function($) {
	setTimeout(function(){
		var toggle_id = location.hash.substring(1);
		if (toggle_id !== '') {
			$('#'+toggle_id+'.et_pb_toggle .et_pb_toggle_title').trigger('click');
		}
	}, 100);
});
</script>

Now you'll be able to open the toggle when linking to the page containing it, by including the ID of your toggle as the "hash" component of the URL. So, for example, your link to the page might look something like this:

https://divibooster.com/some-page/#mysection

Option 3: Open the toggle and scroll to a different element

If you'd like to open the toggle and then have the page scroll to a different element, e.g. the section containing the toggle, then first follow the instructions for "Option 1" above. Then add the id of the element to scroll to (e.g. an id assigned to the section in "Section Settings > Advanced > CSS ID & Classes") as the "hash" component of the URL, giving a final URL like so: 

https://divibooster.com/some-page/?toggle=mytoggle#mysection

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Would it be possible to do all this with just the hash??

    Reply
    • Hey Aaron, absolutely. I've added a section to the post above ("Option 2: Open the toggle and scroll to it") which does it all using the hash. This leads to a neater URL (and shorter code).

      One possible downside to doing it all via the hash is that you can only scroll to the toggle element itself. If you wanted to scroll to, for instance, the section containing the toggle then the original method (now "Option 3") would be needed. An example where you might want to do that is if you had a FAQs section and wanted to open a particular FAQ toggle, but scroll the user to the start of the FAQs.

      Thanks for asking, and I hope that helps!

      Reply
  2. Thanks Dan! This worked perfectly and is just what I was looking for!

    Reply
    • I’m glad it helped, Matthew! :)

      Reply
      • Dan, follow-up question! Some of my pages have a lot of toggles. Is there any way to get the page to scroll to the toggle I'm linking to and opening from a previous page? Thanks!

        Reply
        • Hey Matthew, I've just added a section to the end of the post explaining how to scroll to the toggle. Hope it helps, but let me know if not. Cheers!

          Reply

Submit a Comment

Your email address will not be published.