Toggle Divi Sections And Rows When Button Clicked

Want to toggle sections and rows in Divi using buttons? This video will show you how to achieve two different toggle options. The first option uses multiple buttons to target different sections and rows. The second option uses one button to toggle content open and closed. This is a great idea for items like restaurant menus or FAQs with a lot of information that may not need to be shown all at once.

How It Works

There is only four steps to getting this toggle solution to work:

  1. Label your buttons with two classes
  2. Label your section or row with two classes
  3. Add the CSS found below to your site (Divi Theme Options or on the page)
  4. Add the script to your site (Divi Theme Options or your preferred solution)

This Works For Rows Too!

In my video, I only showed examples of targeting sections to toggle, but it also works for rows. Instead of putting the classes on the sections, you would just place them on the rows.

The Classes I Used

In the multi button solution the buttons require two classes and the sections require two classes.

If you have five buttons, you will need to make sure that the classes identify the number of button it is which will correspond with the section or row you are targeting. If you want to copy and paste, the two classes for each button are listed below.

mtc_button_1 mtc_button_closed
mtc_button_2 mtc_button_closed
mtc_button_3 mtc_button_closed
mtc_button_4 mtc_button_closed
mtc_button_5
mtc_button_closed

The section classes follow the same pattern. Feel free to copy and paste the classes below.

mtc_element mtc_element_1
mtc_element mtc_element_2
mtc_element mtc_element_3
mtc_element mtc_element_4
mtc_element mtc_element_5

For the single button solution, the classes are listed below.

Button Classes:
toggle_btn_1 toggle_btn_closed

Section Classes:
toggle_content toggle_content_1

MULTI BUTTON TOGGLE

CSS NEEDED FOR MULTI BUTTON SOLUTION

body:not(.et-fb) .mtc_element { display: none; }
body:not(.et-fb) .show-on-click, 
body:not(.et-fb) .toggle-on-click { display: none;}

SCRIPT FOR MULIT BUTTON SOLUTION

<script>
jQuery(function($){
	var buttons = {
	'.mtc_button_1': {
		'toggle': '', 
		'hide'  : '.mtc_element_2,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
		'show'  : '.mtc_element_1'
	},
	'.mtc_button_2': {
		'toggle': '', 
		'hide'  : '.mtc_element_1,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
		'show'  : '.mtc_element_2'
	},
	'.mtc_button_3': {
		'toggle': '', 
		'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_4, .mtc_element_5', 
		'show'  : '.mtc_element_3'
	},
	'.mtc_button_4': {
		'toggle': '', 
		'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_5', 
		'show'  : '.mtc_element_4'
	},
	'.mtc_button_5': {
		'toggle': '', 
		'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_4', 
		'show'  : '.mtc_element_5'
	}
		
};
	$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
			$(button).toggleClass('mtc_button_opened mtc_button_closed');
		});
	});
});
</script>

SINGLE BUTTON TOGGLE

CSS NEEDED FOR SINGLE BUTTON SOLUTION

body:not(.et-fb) .toggle_content { display: none; }
.et_pb_button.toggle_btn_opened:after { content:"\32"; }
.et_pb_button.toggle_btn_closed:after { content:"\33"; }

SCRIPT FOR SINGLE BUTTON SOLUTION

<script>
jQuery(function($){
	var revealButtons = {
		'.toggle_btn_1': '.toggle_content_1'
	};
	$.each(revealButtons, function(revealButton, revealElement) {
		$(revealButton).click(function(e){
			e.preventDefault();
			$(revealElement).slideToggle();
			$(revealButton).toggleClass('toggle_btn_opened toggle_btn_closed');
		});
	});
});
</script>

Rather buy the template?

You can grab it here: https://shop.michellethecreator.com/products/divi-layout-toggle-sections-and-rows

Resources

Here are links to the programs and sites I mentioned in the video.

Images: Canva https://www.canva.com/
Copy:
https://openai.com/blog/chatgpt

Credit: Original Blog Post

Divi: https://bit.ly/3mun7TN
WordPress: https://wordpress.org/

Want to learn with me?

Check out my digital course, Recipe For A Sales Page on Udemy. This course features my recipe for a sales or landing page and identifies all the ingredients you need to make a compelling page that will capture your reader’s attention and turn them into paying customers.

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.