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
10 ай бұрын
This worked for me thank you
@ideaplusagency
8 ай бұрын
How about having one of the sections switched to "on" when the page loads?
@mattiaslundevall7455
5 ай бұрын
Nice, but if you want the CTA "Back to the materials" trigger the close button instead, will it work?
@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!!!
@maplesonmedia5568
4 ай бұрын
Just what I was looking for. Thanks!
@monicabjerke3141
11 ай бұрын
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!
@MariaMiguel-m3o
2 ай бұрын
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
2 ай бұрын
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.
@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!
@Anaistg83
12 сағат бұрын
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.
@Michelle.The.Creator
12 сағат бұрын
@Anaistg83 I just emailed you!
@scedge7782
11 ай бұрын
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
8 ай бұрын
Same question...
@amelianolte
Ай бұрын
Same Question
@hookerrabbit
Жыл бұрын
Great video. I almost clicked away when you mentioned Javascript, very glad I didn't.
@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.
@samuelbarnabasifitumi
11 ай бұрын
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
10 ай бұрын
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
10 ай бұрын
@@Michelle.The.Creator Thanks a bunch... You're a Darling..
@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!
@mattiaslundevall7455
5 ай бұрын
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?
@georgehyker
4 ай бұрын
You really packed a lot of great information is this video. Well done! Thank you. I had to use it today!
@woodchuckarts5781
4 ай бұрын
Very helpful video - thank you!
@Michelle.The.Creator
3 ай бұрын
Glad it was helpful!
@muhammedkarbhari3081
5 ай бұрын
Hi, I have just bought this and downloaded this. How do I import and use on my wordpress with divi?
@Michelle.The.Creator
5 ай бұрын
I just sent you an email!
@pedrorivera1892
6 ай бұрын
THANK YOU FOR THE VIDEO!
@chuckholt4134
Жыл бұрын
Just purchased the template because it's fantastic! Thank you!
@Michelle.The.Creator
Жыл бұрын
Awesome! Thanks so much!
@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!
@christopherr.heloudecos7422
8 ай бұрын
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)
@iugurtin
5 ай бұрын
Hello, is it possible to make it just with hover the buttons?
@Konspyresi
Жыл бұрын
Well explained!
@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.
@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.
@spicypdx
7 ай бұрын
Excellent Video - Good for you! and GREAT for me :-)
@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).
@Floatnride
Жыл бұрын
Nice idea
@Michelle.The.Creator
Жыл бұрын
Thanks!
@tiphaniemasson599
5 ай бұрын
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
5 ай бұрын
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.
@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.
@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 :)
@Lifmor.c0m
29 күн бұрын
Thank you very much. You did a great job. I was totally looking for this Thanks a lot.
Пікірлер: 58