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. 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 a minor variation of a tutorial I found on creaweb2b.com called Custom Toggle Section In Divi.

 

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 Do It

All it takes is a little CSS and JavaScript and you’re nearly good to go.

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!

Photo by Pedro Lastra on Unsplash