Toggle Sections and Rows with Button Modules // Divi Tutorial

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.

GRAB THE CODE FOR YOURSELF!

⭐️ BUY THE TEMPLATE AND MODIFY

ORIGINAL BLOG FOUND:

FEATURES IN THE VIDEO

__________________________________________

🎓 ACCESS MY COURSE ON UDEMY!
___________________________________________

⭐️ EXTRA RESOURCES ⭐️
✅ Need help coming up with headlines for your creative content?
Get my FREE guide, Ten Simple Formulas To Write Better Headlines, to help you craft the perfect headlines for your emails.

✅ Looking to build a website?
Get my FREE Building a Website Checklist for tips on laying out and creating your site.

👉 Check Out My Recommended Website Design Resources:

*All images featured in the video were sourced from Google

*Affiliate Disclaimer:
Note this description contains affiliate links that allow you to find the items mentioned in this video and support the channel at no cost to you. While this channel may earn minimal sums when the viewer uses the links, the viewer is in no way obligated to use these links. Thank you for your support!

#MichelleTheCreator #webdesign #divi

[monicabjerke]

Excellent explanation! It helped me achieve something I've been struggling with on and off for quite some time. I was able to modify the code to suit my needs. Thank you so much!

[kevinseisdedos]

Heeey, thanks you a lot for this tuto, it's really help me!!
I'd like to know if it's possible to add something so that when you click on a button, it stays the same as when you hover over it, so that you know which button you're on? In your example it's clear because you've put the title back in the section each time, but in my case it's not very easy to understand... Thanks you!!!

[DanFrydmanWP]

That was so awesome! Really needed to find a way to do this and this was super easy to follow. Thanks! Works nicely in Theme Builder too.

[Vidh_]

if your want your button to be able to show or hide the same section, change the target element of your button from show to toggle in your script.
Example : For your .mtc_button_1' switch from 'show' : '.mtc_element_1' to toggle' : '.mtc_element_1'

[georgehyker]

You really packed a lot of great information is this video. Well done! Thank you. I had to use it today!

[scedge]

I used this and it works great! Modified it for a 3 button scenario... but QUESTION: What if I want the first section "mtc_element mtc_element_1" to be displayed when the page loads? Got a quick easy solution for that? THANKS!

[estyxtranslations]

Very helpful to keep improving the visual aspect on my website. Those are the little things I am slowly implementing to get my page to work more fluidly, and you explained it well, with clear access to the code and with perfect functionality. Thanks a lot for that!

[MariaMiguel-mo]

Thank you for the video! I did it on one of my pages and it worked beautifully!
But when I tried to do the same and follow the same steps to do this on another one of my pages within the same website, it doesn't seem to work and I can't quite pin why

[mattiaslundevall]

Thanks for a helpful video. If you want the CTA "Back to the materials" trigger a close button for the specific section instead, will it work?

[samuelbarnabasifitumi]

Thanks for sharing Michelle... It was really helpful.. How can I show the first section immediately after page load.. The CSS provided is hiding all the section until the button is clicked.

[chuckholt]

Just purchased the template because it's fantastic! Thank you!

[Anaistg]

Hi,

I followed your tutorial for the toggle buttons, it's perfect, thank you, however one thing that I don't understand is that the two sections are still displayed and when I then click on one of the buttons the section is hidden. Can you help me please? THANKS I send you an email with a loom video 2 days ago.

[cesaraar]

Hi, great video. I have a question. I'm creating a site and I want to use a toggle but I can't find the option "initial state" = "close" It's supposed to be in the Content tab, but in my latest version it's not there. Where did you move it? Thank you.

[eyalso]

Hi Michelle, this is great! I just couldn't figure out how to have one of the sections show upon loading, so the page doesn't load with no content. Thanks!!

[muhammedkarbhari]

Hi, I have just bought this and downloaded this. How do I import and use on my wordpress with divi?

[iugurtin]

Hello, is it possible to make it just with hover the buttons?

[richardkent]

Thank you for the video! I'm using rows to toggle instead of sections. I can't get it to work. I've been over it and over it. Are you sure it works with rows? I presume it's ok to have both button stack and button toggle in the same Page custom css? Thanks

[spicypdx]

Excellent Video - Good for you! and GREAT for me :-)

[Salukiprincess]

This was super helpful for cleanly displaying alternate website packages for my two different client types (authors vs. general small business). Thank you so much! (Also, I see you have a lot of great content for freelancers. Subscribed!)

[chrisdavis]

Hi MIchelle, This is a really clear tutorial. Well done. Is there a tidy solution to scroll the user down to a CSS ID after a button is clicked? My attempts to use a hastag ID on the button url (linking to an ID on the relevant section) have been having odd results sometimes working and not at other times. I'm guessing there must be a java script approach to link to the ID. Ill experiemnt but if you have any suggestions it would be great. Thanks again