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!
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!
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'
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.
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.
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
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.
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!!
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.
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!)
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.
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.
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
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?
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
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
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).
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)
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 ?
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.
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.
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.
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!
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.
Awesome to hear!
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!!!
Just what I was looking for. Thanks!
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!
You really packed a lot of great information is this video. Well done! Thank you. I had to use it today!
THANK YOU FOR THE VIDEO!
Very helpful video - thank you!
Glad it was helpful!
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'
This worked for me thank you
How about having one of the sections switched to "on" when the page loads?
Nice, but if you want the CTA "Back to the materials" trigger the close button instead, will it work?
Just purchased the template because it's fantastic! Thank you!
Awesome! Thanks so much!
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!
Same question...
Same Question
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.
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.
@@Michelle.The.Creator Thanks a bunch... You're a Darling..
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
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.
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?
Well explained!
Excellent Video - Good for you! and GREAT for me :-)
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!!
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.
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!)
Glad it was helpful!
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.
@Anaistg83 I just emailed you!
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.
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
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?
@@Michelle.The.Creator seven buttons and seven rows. Could other features on the page interfere such as a global footer?
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
@@Michelle.The.Creator Thank you Michelle I did get it working and I love it! My previous reply no where to be found.
Hi, I have just bought this and downloaded this. How do I import and use on my wordpress with divi?
I just sent you an email!
Hello, is it possible to make it just with hover the buttons?
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
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).
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)
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 ?
Do you have it live somewhere I can look at? If so you can send an email to hello@michellethecreator.com and I can check it out.
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.
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.
@@Michelle.The.Creator Thank you for your prompt reply! (It’s a long weekend). Purchased your Demo to play with.
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 😂
Because it requires you to add classes to the buttons, rows, or sections you want to use, it will not affect the site globally.
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.
Hi Michelle! Could you please check your email as Im trying to reach you :)
Thank you very much. You did a great job. I was totally looking for this Thanks a lot.
Nice idea
Thanks!