Toggle Sections and Rows with Button Modules // Divi Tutorial

It works so well, thanks a lot for sharing ! It was so simple and results is great. Thanks for updating the javascript code on your page too

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.

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

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

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

Very helpful video - thank you!

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

Just what I was looking for. Thanks!

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

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?

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

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 ?

THANK YOU FOR THE VIDEO!

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

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)

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!

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.

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!

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.

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'

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

Well explained!

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.

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

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

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!

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

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.

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 😂

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

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

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

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.

Nice idea