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!
michellethecre...
⭐️ BUY THE TEMPLATE AND MODIFY
shop.michellet...
ORIGINAL BLOG FOUND:
divibooster.co...
FEATURES IN THE VIDEO
Images: Canva www.canva.com/
Copy: openai.com/blo...
Divi // Elegant Themes: bit.ly/3mun7TN
__________________________________________
🎓 ACCESS MY COURSE ON UDEMY!
www.udemy.com/...
___________________________________________
⭐️ 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.
michellethecre...
✅ Looking to build a website?
Get my FREE Building a Website Checklist for tips on laying out and creating your site.
Get it here at this link: michellethecre...
👉 Check Out My Recommended Website Design Resources:
Flywheel Web Hosting: share.getf.ly/...
Divi // Elegant Themes: bit.ly/3mun7TN
*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

[@monicabjerke3141]

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!

[@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.

[@Michelle.The.Creator]

Awesome to hear!

[@maplesonmedia5568]

Just what I was looking for. Thanks!

[@kevinseisdedos3199]

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!!!

[@hookerrabbit]

Great video. I almost clicked away when you mentioned Javascript, very glad I didn't.

[@estyxtranslations6877]

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!

[@georgehyker]

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

[@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'

[@fionadevine6070]

This worked for me thank you

[@ideaplusagency]

How about having one of the sections switched to "on" when the page loads?

[@mattiaslundevall7455]

Nice, but if you want the CTA "Back to the materials" trigger the close button instead, will it work?

[@woodchuckarts5781]

Very helpful video - thank you!

[@Michelle.The.Creator]

Glad it was helpful!

[@pedrorivera1892]

THANK YOU FOR THE VIDEO!

[@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!)

[@Michelle.The.Creator]

Glad it was helpful!

[@chuckholt4134]

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

[@Michelle.The.Creator]

Awesome! Thanks so much!

[@Konspyresi]

Well explained!

[@mattiaslundevall7455]

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?

[@MariaMiguel-m3o]

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

[@Michelle.The.Creator]

I would make sure that the CSS and the JavaScript are in a location that is globally accessible to your site and not localized to the page. Without knowing how things are set up, that would be my first guess.

[@spicypdx]

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

[@scedge7782]

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!

[@ideaplusagency]

Same question...

[@amelianolte]

Same Question

[@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.

[@Michelle.The.Creator]

Yes, there is a way to show the first section. You just need to get rid of the "mtc_element" class and leave the "mtc_element_1". The "mtc_element" is just setting the display to none, so if you delete it from the section you want showing it should work for you.

[@samuelbarnabasifitumi]

@@Michelle.The.Creator Thanks a bunch... You're a Darling..

[@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!!

[@Michelle.The.Creator]

It's possible, and easy! Just remove the class "mtc_element" from the section or row you want to show up. All that class is doing is setting the display to none. Keep the other class that has the number. Hopefully that makes sense.

[@Floatnride]

Nice idea

[@Michelle.The.Creator]

Thanks!

[@iugurtin]

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

[@muhammedkarbhari3081]

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

[@Michelle.The.Creator]

I just sent you an email!

[@christopherr.heloudecos7422]

Chat GPT can help with hiding information once the button is pressed a second time, AND change the effect that is used to display the information (i asked it to make it so that it fades rather than slide)

[@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.

[@richardkent1273]

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

[@Michelle.The.Creator]

It definitely works for rows too. I had another video where I previewed side-by-side button modules and targeted rows instead of sections. Let me work up an example of this. How many buttons and rows are you toggling?

[@richardkent1273]

@@Michelle.The.Creator seven buttons and seven rows. Could other features on the page interfere such as a global footer?

[@Michelle.The.Creator]

In case you haven't solved it yet, I put together a quick CodePen using seven buttons targeting seven divs. Even though this is outside of Divi, it works the same way. codepen.io/chelleschneider/pen/bGmeGbR

[@richardkent1273]

@@Michelle.The.Creator Thank you Michelle I did get it working and I love it! My previous reply no where to be found.

[@tiphaniemasson599]

Hello ! I bought the template but unfortunately it's not working on my hand. When I click on any button it does not open the section, it's just get back to the top of the page ... Can you help ?

[@Michelle.The.Creator]

Do you have it live somewhere I can look at? If so you can send an email to [e-mail] and I can check it out.

[@chrisdavis9223]

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

[@chrisdavis9223]

Actually by adding a hidden module below the main buttons row (so it is always in view on the page) it has the affect of scrolling to the section below. I think the issue was arising as sometimes the ID of one of the hidden sections wasnt presaent yet when clicked so this just too the user to the top of the page. BTW worth mentioning your method works with other modules if coded in the same way as you have explained. I have it using call to action modulesand its great. (not tested against other divi mobules yet).

[@jean-guycharette2181]

Love the concept. Can this be modified so that :Organic Cotton” content is already open when you open page and then clicking “Hemp” closes “Organic Cotten” and shows Hemp content. “Organic button would return to Organic content and so forth.

[@Michelle.The.Creator]

Yes! That is actually super easy to do. All you have to do is remove the "mtc_element" class from the Organic Cotton section. The "mtc_element" is telling it to display:none. So if you remove that and leave the "mtc_element_1," it will work as you described.

[@jean-guycharette2181]

@@Michelle.The.Creator Thank you for your prompt reply! (It’s a long weekend). Purchased your Demo to play with.

[@mylyndab2530]

Can I do this for a specific page only? E.g my website has 10 pages on it but I only want this function to work with the page… 😅 sorry total newbie to css and Java so worried if I paste your code into the theme settings it may bugger other pages with buttons 😂

[@Michelle.The.Creator]

Because it requires you to add classes to the buttons, rows, or sections you want to use, it will not affect the site globally.

[@Lifmor.c0m]

Thank you very much. You did a great job. I was totally looking for this Thanks a lot.

[@domiasmoth]

With some testing (Also not a JS expert but pretty good with Google!), by adding a 0 in the slide up and down () you can essentially change the toggle to be instant without the sliding effect. IE: $(elements.show).slideDown(0); $(elements.hide).slideUp(0); This is however a workaround and is probobly not best practice for this implementation.

[@call.memaybe]

Hi Michelle! Could you please check your email as Im trying to reach you :)