Sometimes you want to keep your page clean but still want to have “more” content available to your visitors without them having to navigate away from the page they’re on (similar to a popup).
In this tutorial, I’ll show you how to toggle a Divi section, row, or module when you click on a button.
This tutorial is essentially the same as the “Custom Reveals” feature that is included in the Divi Hacks plugin. So if you want this effect without having to touch code, we highly recommend taking a look at the Divi Hacks plugin.
The Example
Click the button below to reveal a row containing some text, an image, and a video.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed turpis et elit hendrerit malesuada tempus quis sapien. Integer id volutpat magna.
How To Create the Custom Toggle Reveal
All it takes is a little CSS and JavaScript and you’re nearly good to go. This effect is very easy to implement once you get the hang of it.
Let’s begin by adding a Divi Code Module to the page. Once you’ve done that add the CSS and Javascript below to the code module. You can place both into the same module or you can put the CSS where you’d normally place it (either in your child theme’s css file, in the Divi Theme Options Custom CSS field, or at page level under Settings (the hamburger) at the top of the Divi Editor), and the JavaScript in the Divi Theme Options Integration tab. If you don’t add the CSS to a code module, just remember to remove the <style> opening and closing tags.
The CSS
The JavaScript
The Finishing Touches
Now all that’s left to do is to add the button and the section, row, or module you want to hide and reveal and set the CSS Class of the button and the ID of that section, row, or module.
The Button
Add a button to your page and in the CSS Class field (under the Advanced tab) add the class names rv_button and closed separated by a space.
The Section, Row, or Module
Now that you’ve sorted out the button, head over to the Divi Section, Row, or Module that you want hidden and give it the ID of reveal. Remember that you can only use an ID once on a page.
Wrapping It Up
Now that you’ve added the CSS, JavaScript, the Class to the button and the ID to the object that you want to hide, you should be good to go!
As mentioned earlier, this same effect is found in the Divi Hacks plugin by Divi Life (along with a lot of other great features). So if you don’t want to mess with the code, then definitely check that out.
Photo by Pedro Lastra on Unsplash