Toggle Sections and Rows with Button Modules // Divi Tutorial

Nice idea

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.

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

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

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

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 😂

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.

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

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!

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

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

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.

Well explained!

Just purchased the template because it's fantastic! 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'

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.

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!

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.

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!

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)

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

THANK YOU FOR THE VIDEO!

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 ?

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

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?

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

Just what I was looking for. Thanks!

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

Very helpful video - thank you!

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

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 very much. You did a great job. I was totally looking for this Thanks a lot.

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.

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