Rob over at Divi Notes has a nice post on how to reveal a Divi section, row or module when a button is clicked. I've made what I think is a slight improvement to his code which I wanted to share here.
The code in that post uses jQuery to hide the element (section, row or module) once the page has loaded. The problem with this is that the element can be briefly visible while the page loads. A better approach is to hide the element with CSS, which takes effect right away and will keep the element hidden during the page load.
Here's my version of the code from that post which achieves this. The process of using it is the same as before:
<style>
#reveal { display: none; }
.rv_button.closed:after { content:"\33"; }
.rv_button.opened:after { content:"\32"; }
</style>Related Post: Adding CSS to the Divi Theme
<script>
jQuery(function($){
$('.rv_button').click(function(e){
e.preventDefault();
$("#reveal").slideToggle();
$('.rv_button').toggleClass('opened closed');
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
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".
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… 🙂