Today a user on an FB group asked if it was possible or easily doable to use Divi Blurb mobules as toggle ones showing and/or hiding some content with the click on the blurb images or titles.

This is a nice idea where we can use a Blurb Module to toggle content added in its editor. This can be easily done with some JavaScript. I am using jQuery library here. Please read on.

STEP #1

First add a Divi Blurb Module on a row. You can add multiple modules to your liking. Add a title and a blurb image. Leave the URL field empty.

Now add the following HTML in the Blurb Editor box.

 

In the above HTML you can place anything, image or text. Just make sure you maintain the Div structure
<div class="blurb-content">............</div>

STEP #2

Now move to Divi/Extra epanel/ Divi/Extra Theme Options page and add the following JS in this field Add code to the < head > of your blog under the Integration Tab

STEP #3

Add the following CSS in the Divi epanel Custom CSS Box or in your style.css file.

That’s it. With these three steps, you will see that your content in your blurb will show up with a transition when the Blurb image or the Blurb title is clicked.

Hope it helps. Let us know your feedback.

Thanks

Share This