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:
- Label your buttons with two classes
- Label your section or row with two classes
- Add the CSS found below to your site (Divi Theme Options or on the page)
- 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>UPDATE!
The code below can be used to toggle sections open and closed! That means clicking a button once will open the section or row and clicking it again will close it. The example below is for five buttons. The code would need to be adjusted accordingly if you have more buttons.
Open and Close Script for Five Buttons
<script>
jQuery(function($){
var buttons = {
'.mtc_button_1': {
'toggle': '.mtc_button_2, .mtc_button_3, .mtc_button_4, .mtc_button_5',
'hide' : '.mtc_element_2,.mtc_element_3, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_1'
},
'.mtc_button_2': {
'toggle': '.mtc_button_1, .mtc_button_3, .mtc_button_4, .mtc_button_5',
'hide' : '.mtc_element_1, .mtc_element_3, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_2',
},
'.mtc_button_3': {
'toggle': '.mtc_button_1, .mtc_button_2, .mtc_button_4, .mtc_button_5',
'hide' : '.mtc_element_1, .mtc_element_2, .mtc_element_4, .mtc_element_5',
'show' : '.mtc_element_3'
},
'.mtc_button_4': {
'toggle': '.mtc_button_1, .mtc_button_2, .mtc_button_3, .mtc_button_5',
'hide' : '.mtc_element_1, .mtc_element_2, .mtc_element_3, .mtc_element_5',
'show' : '.mtc_element_4'
},
'.mtc_button_5': {
'toggle': '.mtc_button_1, .mtc_button_2, .mtc_button_3, .mtc_button_4',
'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();
if($(button).hasClass("mtc_button_opened")){
$(elements.show).slideUp();
$(button).toggleClass('mtc_button_opened mtc_button_closed');
}else{
$(elements.show).slideDown();
$(elements.hide).slideUp();
$(button).toggleClass('mtc_button_opened mtc_button_closed');
$(elements.toggle).removeClass(['mtc_button_opened','mtc_button_closed']);
$(elements.toggle).addClass('mtc_button_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.
