- Preventing the hidden component from being briefly displayed when the page loads
- Support for multiple hidden sections / reveal buttons
- No hiding of the component in the visual builder for easier editing
Reveal a Divi Builder Element on Click Using CSS / JQuery
Here are the steps to making a Divi Builder element (module, etc) displayed on the click of a button (and re-hidden if the button is clicked again).
Step 1: Add the "reveal" button and give it a class
If you haven't already done so, add a Button Module to your page that you want to use to show / reveal the target element. Then go to:
Button Settings > Advanced > CSS ID & Classes > CSS Class
And add the following to the CSS class field:
rv_button_1
Step 2: Add the hidden element and give it a class
Now add the element you want to show / hide. This can be a section, row or module. Go to the settings for the element, e.g.
{Element} Settings > Advanced > CSS ID & Classes > CSS Class
And add the following to the CSS Class field:
rv_element rv_element_1
Step 3: Add the following CSS / JavaScript code to your site
<style>
body:not(.et-fb) .rv_element { display: none; }
.et_pb_button.rv_button_opened:after { content:"32"; }
.et_pb_button.rv_button_closed:after { content:"33"; }
</style>Related Post: Adding CSS to the Divi Theme
<script>
jQuery(function($){
var revealButtons = {
'.rv_button_1': '.rv_element_1'
};
$.each(revealButtons, function(revealButton, revealElement) {
$(revealButton).click(function(e){
e.preventDefault();
$(revealElement).slideToggle();
$(revealButton).toggleClass('rv_button_opened rv_button_closed');
});
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Step 4: Publish and view the page
If all has gone well, the element should be hidden on the page. Clicking on the reveal button should reveal the element, and clicking a second time should hide it again.
If you have any trouble getting it to work, let me know in the comments or via the contact form.
Advanced: Adding more reveal buttons
If you want to add further reveal buttons (which reveal their own elements), you can do it like so:
- Give each new reveal button its own CSS class, for example "rv_button_2" for the second reveal button, "rv_button_3" for the third and so on.
- Give each new hidden element its own CSS class, for example "rv_element rv_element_2" for the second element, "rv_element rv_element_3" for the third, and so on.
- Modify the JavaScript code to include these new classes, e.g.
<script>
jQuery(function($){
var revealButtons = {
'.rv_button_1': '.rv_element_1',
'.rv_button_2': '.rv_element_2',
'.rv_button_3': '.rv_element_3'
};
$.each(revealButtons, function(revealButton, revealElement) {
$(revealButton).click(function(e){
e.preventDefault();
$(revealElement).slideToggle();
$(revealButton).toggleClass('rv_button_opened rv_button_closed');
});
});
});
</script>
Hi Dan,
Thanks for this bit of code. It works.. If I only wanted to do three buttons. I want to add 3 more buttons onto my page, and I've checked each bit of code to make sure this works, but only first three are working. And only two are working correctly.
I've set each row I want to load correctly in consecutive order. But my button#3 is loading my button #6 content… I'm thinking I may just have too much content on my page? Would you be able to check it out?
Ah. Nevermind! I just looked at it one more time, and I missed changing the button #s in the javascript. This works perfectly! Thank you!!
Great! I’m glad you figured it out, Sannah. Thanks for letting me know 🙂
Hi,
can i make that work with a menu as well? i would like to use a menu instead of the button module. sadly if i add the css to the menu item via the optional CSS fields for menus it does not work.
Hey Stefan, are you able to share a link to an example page, pointing out the menu item you want to link / the element you want to reveal? I think a few changes might be needed to both the CSS and jQuery code to make this work, but this will likely depend a bit on the setup of your menu, etc. If you're able to send through that link (or describe in more details your setup – e.g. are you using a menu module or default Divi menu, is this a submenu item, etc) I'll try to come up with a solution that works for you. Cheers!
hey Dan, thanks for the code. works fine!
here's my question: I tried to apply the class rv_button to a text module. Works, too, but: if I activate the button a 3 is added to the text in it…
Is there a way to avoid this?
Hey Julian, were you able to solve this? I took a look at the site linked in your comment and can see the text module reveal working without the "3" appearing. If you're still having problems with it, let me know. Thanks!
Hello, Dan! Thanks for posting this. I've been working on adding a custom button or call to action module which will expand a large search box when clicked on. The solution works great, however, I'm seeing a bit of a jump when the button is clicked, e.g. the search box code module jumps a bit to the top right under the button before it stabilizes. I've tried adding the CSS and jQuery code to the overall page header in Divi but it didn't work. Do you have an idea of how I can avoid that jump? I also confirmed there aren't any modified styles in the search code module either.
Thanks much, for any insight you might provide!
Hey Kory, is there any chance you're able to send me a link to an example page showing the problem so that I can take a look at how you have it set up? If not, are you able to do capture video of the effect? That should help me replicate / debug the issue. Thanks!
OK, made some mods and I think I have it working now.
Okay, great. Thanks for letting me know, Maurice. I took a look and I can see it working as you describe, but give me a shout if you have any further problems with it. Cheers!
Something isn't working here. It opens then immediately closes every time. Very strange.
I have put this line in and taken it out – no change:
#reveal { display: none; }
I actually want it to come in open and close after. But it just won't work. Ideas?
Thanks Dan, I was wondering would there be any issues if I wanted to use this multiple times on my site with different hidden elements. I don't really see why there would be but doesn't hurt to ask!
Hey Tanner, if you're using it on different pages then there should be no problem at all. You can just include the CSS / JS code globally and then on any page you want to use the code, add the "rv_button" class to your "reveal button" and the "reveal" id to the module / row / section you wish to reveal.
If you want to have multiple reveal buttons / sections on a single page, you could duplicate the code and replace all the mentions of the "rv_button" class and "reveal" id with, e.g., "rv_button_2" and "reveal_2".
Hi Dan – thanks for this code. I'm attempting to add multiple reveal secants on a single page. I've tried changing code for the subsequent areas to _2 and so forth, but it's not working. Additionally, I'm seeing the "2" and "3" numbers over my images. Any help would be greatly appreciated. Thanks.
It looks like the issue is that while you've updated the code correctly, you haven't yet updated the class in the reveal button (blurb, in your case) module settings. This should be updated to match what you have in the code ("rv_button_2", etc). Likewise, you need to add the new IDs you've created for the reveal element ("reveal_2") in the CSS Class settings for the corresponding element (row, in your case). The stray "2" and "3" you're seeing in the page is a result of using the code on a blurb module instead of a button module. You can fix this by deleting the two rows of CSS that read:
.rv_button.closed:after {content:"\33";} .rv_button.opened:after {content:"\32";}Hopefully that sorts it out for you. If not, I've updated the post with a some changes to the code and further details to make it (hopefully) easier to achieve multiple reveal buttons. It should also sort out the issue with the stray numbers. Note that this would be a replacement for the code, etc, that you've already applied.
I hope that helps, but please let me know if not.
I've given this a try, and it's doing the opposite—the module I want to be hidden is visible upon page load. Clicking the button actually hides the module instead of reveals it. Any ideas?
Hi Kristin, there are a couple of things stopping it from working at the moment.
First is that the CSS code isn't being added to the page. Make sure the first block of code is added to your site, and clear any caches on your site after doing so. Depending on where you add it, you may or may not need the "style" tags. This first line of CSS (the one starting "#reveal") is the one responsible for hiding the module initially.
Second, I can see that you've set "reveal" as the ID of both the module and the section containing it. You'll need to remove the ID from one of these elements. Remove it from the section if it is the module you want to reveal, and remove it from the module if it is the whole section (padding and all) that you want to reveal. The feature won't work with both IDs present.
I hope that helps!
Thanks, Dan! We're up and running now. For some reason, the CSS code didn't take the first time around. A good lesson to double check that edits save first and foremost!
Good catch on the double reveal ID. Thanks again!
Great! I'm glad you're figured it out, Kristin, and that that's all it was. I don't want to think about how many hours I've spend debugging issues only to realise I never saved the changes… 🙂