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>Related Post: Adding JavaScript / jQuery to Divi.
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.
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?
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!