Divi Show / Hide Button lets you reveal and/or hide Divi Builder elements at the click of a button. If you have an existing Divi Show / Hide Button module on your page, and would like to additionally have an image module on your page which triggers the same action as your show / hide button, there are several ways you can do it.
Use a Second Show / Hide Button as the Image
One way to make the image perform the same action as the button would be make a copy of your button and use this as the image by removing the button text and setting your image as the button background, as described in this post:
https://divibooster.com/reveal-a-divi-module-or-row-section-when-image-clicked
Make a Click on the Image Module Trigger a Click on the Show / HIde Button Module
An alternative is to use some jQuery code to pass a click on the image through to the show / hide button, e.g.:
jQuery(document).ready(function($){
$('#myimage').on("click", function(){
$('#mybutton').trigger('click');
});
});Related Post: Adding JavaScript / jQuery to Divi.
To use this:
- Add it in to your site (e.g. at "Divi > Theme Options > Integration > Add code to the head of your blog")
- Give your Image module an ID of "myimage" at "Image Settings > Advanced > CSS ID & Classes > CSS ID"
- Give your Divi Show / Hide Button module an ID of "mybutton" at "Show / Hide Button Settings > Advanced > CSS ID & Classes > CSS ID"
0 Comments