Reveal a Divi Module (or Row / Section) when Button Clicked

|

This post describes how to show, hide or toggle Divi Builder elements at the click of a button.

Reveal Elements on Click using Divi Show / Hide Module

Divi Show / Hide Button Module is a plugin I designed to make it easier to implement some of the effects described later in this post – without the need to mess around with jQuery code.

It is a modified version of the built-in Divi Button module. Rather than linking to another page, it lets you show, hide and toggle the visibility of elements on the same page. It can be styled the same way as the standard button module. 

Check out the Divi Show / Hide Button Module here. 

Divi Show / Hide Button Module

Reveal Elements on Click Using CSS / JQuery

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 are a couple of improvements, which are shared below. The changes include:

  • 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

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

Add a Button Module to your page that you want to use to show / reveal the target element.

Then set

Button Settings > Advanced > CSS ID & Classes > CSS Class

to

rv_button_1 rv_button_closed

like so:

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>
<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>
See the related posts for a discussion of the best way to add CSS / jQuery code, but for now a quick way to get going is to just paste both bits of code into the "Divi > Theme Options > Integration > Add code to the head of your blog" box, like so:

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.

It should look something like this:

Before:

After:

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>

Advanced 2: Showing and hiding elements on click

If you want to do something more than just revealing an element when the reveal button is clicked, here's an extended version of the code above, which adds the ability to show, hide and toggle multiple elements from the same button. This lets you do things like hide an element when revealing another, or replacing the reveal button with content (by hiding the reveal button once clicked).

<style>
body:not(.et-fb) .show-on-click, 
body:not(.et-fb) .toggle-on-click { 
	display: none; 
}
.et_pb_button.rv_button_opened:after { content:"\32"; }
.et_pb_button.rv_button_closed:after { content:"\33"; }
</style>
<script>
jQuery(function($){
	var buttons = {
		'.rv_button_1': {
			'toggle': '.toggle-on-click', 
			'hide'  : '.hide-on-click', 
			'show'  : '.show-on-click'
		}
	};
	$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
			$(button).toggleClass('rv_button_opened rv_button_closed');
		});
	});
});
</script>

The biggest change is that the buttons array now defines "toggle", "hide" and "show" values for the button(s).

  • "toggle" takes a comma-separated list of CSS selectors which will be alternated between hidden and visible with each click of the reveal button. This is the default behavior of the earlier code examples.
  • "hide" takes a comma-separated list of CSS selectors which will be hidden when the button is clicked. Subsequent clicks won't affect their visibility.
  • "show" takes a comma-separated list of CSS selectors which will be displayed when the button is clicked. Subsequent clicks won't affect their visibility. It makes sense to hide such elements initially using CSS, as done for the ".show-on-click" class in the style block above.

Setup the button as per step 1, and give each element you want to be affected by the button the appropriate class (in the case of the example code this would be either "toggle-on-click", "hide-on-click" or "show-on-click").

Now you should see an effect similar to this (left column is set to toggle, center to show, and right to hide):

Initial state:

After first click:

After second click:

Advanced 3: Changing the Open / Close Icons

you can change the open / close icon from the default up / down arrow by changing these lines of CSS:

.et_pb_button.rv_button_opened:after { content:"32"; }
.et_pb_button.rv_button_closed:after { content:"33"; }

Here '32' is the code for the up arrow icon and '33' is the code for the down arrow icon. You can easily change this to another icon from this list:

https://www.elegantthemes.com/blog/resources/elegant-icon-font

Go to the "Complete Set and Unicode Reference Guide" section and then locate your desired icon(s). Take the part of the icon's code as shown here:

Then substitute it into the CSS. So for the solid up and down arrow shown here, you'd get the values of '42' and '43', giving the following CSS:
.et_pb_button.rv_button_opened:after { content:"42"; }
.et_pb_button.rv_button_closed:after { content:"43"; }

Advanced 4: Hiding Other "Tabs" Initially

If you have several reveal buttons and want to create a "tabbed" effect, you may wish to simulate a click on the first reveal button to hide the content of the other "tabs". Here's two ways to do it:

1) Hide the other tab content elements initially via CSS, such as:

.rv_element_2,.rv_element_3,.rv_element_4 { 
	display: none; 
}

Note that you may need to change these class names to match your setup.

You can add this into your child theme style.css file or the "Divi > Theme Options > General > Custom CSS" box.

2) Trigger a click event on the button using jQuery. You should be able to do so by adding this after the jQuery code you've already added above:

jQuery(function($){
	$('.rv_button_1').click();
});

Where "rv_button_1" is the class assigned to your first "tab" button.

The two options should achieve pretty much the same result, but there are some slight differences. The first option will apply immediately, while the second option only applies once the page is fully loaded, which might lead to the rows being briefly visible while the page is loading. The second option, though, more accurately simulates a button click which might be useful if you ever attach more complex behavior to the button.

Related post: Creating Tabs using the Divi Show / Hide Button Module

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

59 Comments

  1. Thank you for this solution!

    I have a problem with Divi Sticky feature (Row Settings > Advanced > Scroll Effect). I'm using show/hide button to filter different content groups (e.g. 'All campaigns', 'Campaign 1', 'Campaign 2') and there's a "inner navigation" with sticky effect in each hidden content group ('Campaign 1', 'Campaign 2') to filter groups sub content.

    Sticky row works otherwise but not with 'rv_element' class. When I add the class to the row settings the row disappears when scrolling the groups sub content.

    Is it possible to fix this?

    Reply
    • Hey Outi, it looks like the sticky feature is overwriting the visibility of the element as set by show / hide button, and not restoring it after the sticky effect is removed. As such, it's basically putting the row back into the hidden state. I'll try to come up with a proper fix for this and update here when I do. In the meantime, it looks like it's possible to workaround this by applying the "rv_element" class to an outer element and then apply the sticky settings to an inner element. So, for example, if you're able to (re)arrange your layout such that you can apply the "rv_element" to a section and the sticky effect to a row within it, that should work. Likewise, if you apply the "rv_element" to the row and then make the modules within the row sticky, that should work too. If that isn't going to be possible, let me know (with a link to an example page, if possible). Cheers!

      Reply
  2. Great post, but i have one problem.

    I want the first button simulated as clicked so it hides the other rows, i tried adding the class rv_button_1 rv_button_opened to the button but does not work:

    jQuery(function($){
    var buttons = {
    '.rv_button_1': {
    'toggle': ",
    'hide' : '.rv_element_2,.rv_element_3,.rv_element_4',
    'show' : '.rv_element_1'
    },
    '.rv_button_2': {
    'toggle': ",
    'hide' : '.rv_element_1,.rv_element_3,.rv_element_4',
    'show' : '.rv_element_2'
    },
    '.rv_button_3': {
    'toggle': ",
    'hide' : '.rv_element_1,.rv_element_2,.rv_element_4',
    'show' : '.rv_element_3'
    },
    '.rv_button_4': {
    'toggle': ",
    'hide' : '.rv_element_1,.rv_element_2,.rv_element_3',
    'show' : '.rv_element_4'
    }
    };
    $.each(buttons, function(button, elements) {
    $(button).click(function(e){
    e.preventDefault();
    $(elements.toggle).slideToggle();
    $(elements.show).slideDown();
    $(elements.hide).slideUp();
    $(button).toggleClass('rv_button_opened rv_button_closed');
    });
    });
    });

    Website: https://drive.demowebsite1.nl/

    Reply
    • Hey Jeffrey, I can see two options that should work:

      1) Hide the elements initially via CSS, such as:

      .rv_element_2,.rv_element_3,.rv_element_4 { display: none; }
      

      You can add this into your child theme style.css file or the "Divi > Theme Options > General > Custom CSS" box.

      2) Trigger a click event on the button using jQuery. You should be able to do so by adding this after the jQuery code you've already added:

      jQuery(function($){
      	$('.rv_button_1').click();
      });
      

      The two options should achieve pretty much the same result, but there are some slight differences. The first option will apply immediately, while the second option only applies once the page is fully loaded, which might lead to the rows being briefly visible while the page is loading. The second option, though, more accurately simulates a button click which might be useful if you ever attach more complex behavior to the button.

      I hope that helps, but let me know if not. Thanks!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *