I've previously written about revealing content at the click of a Divi button. Here's how to do a similar thing using the Divi Blurb module – that is, revealing a Divi module, row or section when the Blurb module is clicked.
Add Classes to your Blurb module
First, add the following classes to your Blurb module:
rv_blurb rv_blurb_1 rv_blurb_closed
You can add them at:
Blurb Settings > Advanced > CSS ID & Classes > CSS Class
Like so:
The "rv_blurb" is a general class that can be used to apply styles to all such clickable blurbs.
The "rv_blurb_1" class is specific to this blurb and will be used to associate this blurb with the element it is to reveal. If you add additional clickable blurbs, give them their own variants of this class, e.g. "rv_blurb_2", "rv_blurb_3" and so on.
The "rv_blurb_closed" class won't be used here, but is added so that you can style the blurb differently depending on whether or not its associated content is shown or hidden. The class will be changed to "rv_blurb_opened" when the content is visible.
Add a Classes to your Content element
Now add the following classes to the element you want to show / hide (i.e. your module, row or section):
rv_element rv_element_1
You can add them at:
Module Settings > Advanced > CSS ID & Classes > CSS Class
Like so:
Again "rv_element" is a general class that can be used to apply styles to all such elements.
The "rv_element_1" class is specific to the content element(s) to be hidden by your first blurb. If you add additional clickable blurbs, then give their respective content elements their own variants of this class, e.g. "rv_element_2", "rv_element_3" and so on.
Add the CSS and JavaScript
Now add the following CSS and JavaScript code to your site. It will do the work of initially hiding the content element, handling the click on the blurb module and then revealing the content element:
<style>
body:not(.et-fb) .rv_element {
display: none;
}
.rv_blurb {
cursor: pointer;
}
</style>
<script>
jQuery(function($){
var revealBlurbs = {
'.rv_blurb_1': '.rv_element_1'
};
$.each(revealBlurbs, function(revealBlurb, revealElement) {
$(revealBlurb).click(function(e){
e.preventDefault();
$(revealElement).slideToggle();
$(revealBlurb).toggleClass('rv_blurb_opened rv_blurb_closed');
});
});
});
</script>An easy way to add this is by pasting it all into a Divi Code module on the same page as your Blurb module. Alternatively, you can add it at:
Divi > Theme Options > Integrations > Add this code to the head of your blog
Save and View the Page
If you now save the page and view it on the front-end you should find that the content element is initially hidden. If you click on the blurb, the content element will be revealed, and if you click on the blurb again the content element will once again be hidden.
Hey, I've just tried this and it's not revealing the text module, it's just concealing itself when clicked. I've tried a few different places of adding the code… same thing.
What date was this tutorial published please?
Hey Bec, sorry you're having trouble with this. The post was published in July and was updated in October, so I'd consider it current given the limited Divi updates in that time. Is there any chance you able to share a link to the page you're working on (privately, via the contact form, if you like)? It sounds like maybe something is overriding the CSS to hide the text module initially, but I should be able to tell you more if I can see it in action. Thanks!