Make an Image Trigger a Divi Show / Hide Button

|

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');
    });
});

​To use this:

  1. Add it in to your site (e.g. at "Divi > Theme Options > Integration > Add code to the head of your blog")
  2. Give your Image module an ID of "myimage" at "Image Settings > Advanced > CSS ID & Classes > CSS ID"
  3. Give your Divi Show / Hide Button module an ID of "mybutton" at "Show / Hide Button Settings > Advanced > CSS ID & Classes > CSS ID"

0 Comments

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.