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:


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.:

    $('#myimage').on("click", function(){

​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"


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.