Trigger a Divi Show / Hide Button from a Link

|

The Divi Show / Hide Button Module lets you reveal, hide and toggle Divi Builder elements using a Divi-style Button. If you'd like to be able to scroll to and trigger a show / hide button from a link, here's how to do it.

Open a show / hide button from a link using JavaScript

To enable opening of show / hide buttons from a link, add the following JavaScript / jQuery code to your to your site:

<script>
/* Open a Divi Show / Hide Module when Linking to the Page */
jQuery(function($) {
	
	// Click button if id set in url hash
	setTimeout(
		function(){
			var button_id = location.hash.substring(1);
			if (button_id !== '') {
				$('#'+button_id+'.et_pb_db_show_hide_button .et_pb_button').trigger('click');
			}
		}, 
		1000
	);
	
	// Handle same page links
	$('a[href*="#"]').each(
		function() {
			var $link = $(this);
			var link_url = $(this).attr('href');
    		var link_hash = link_url.substring(link_url.indexOf("#") + 1);
			if (link_hash.length > 0) {
				var $button = $('.et_pb_db_show_hide_button#'+link_hash);
				if ($button.length) {
					$link.unbind('click');						
					$link.on('click', function() {
						et_pb_smooth_scroll($button, false, 800);
						$button.not('.dshb-active-button').find('.et_pb_button').click();
					});
				}
			}			
		}
	);
});
</script>

Next, give your show / hide button module a CSS ID in the module settings at:

Show / Hide Button Settings > Advanced > CSS ID & Classes > CSS ID

Now you can simply add this ID as a "hash" at the end of your URL. So, for example, if you set your CSS ID to "my-button" then you can add it to a page URL like so:

https://divibooster.com/some-page/#my-button

Now when you enter the URL in the browser address bar, or link to it from somewhere on your site, the page will scroll down to the show / hide button with the "my-button" ID and a click will be simulated on the button, showing (or hiding) the associated content.

2 Comments

  1. Hi! This code and the show/hide button solved something I've been stumped with. The only thing is, I don't want it to scroll to the section and click the button, I want it to just click the button from wherever I am on the page (this won't be used externally, it will be a link on a page that should click my show/hide button). Is that possible?

    Reply
    • Hey Gideon, I think you should be able to do what you're after by changing this part of the code:

      $link.unbind('click');						
      $link.on('click', function() {
      	et_pb_smooth_scroll($button, false, 800);
      	$button.not('.dshb-active-button').find('.et_pb_button').click();
      });
      

      To this:

      $link.on('click', function(e) {
      	e.preventDefault();
      	$button.not('.dshb-active-button').find('.et_pb_button').click();
      });
      

      That should disable the scroll effect while still clicking the show / hide button. Hope it helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.