How To Set The Toggle Or Accordion Module Default State Open Or Closed
Вставка
- Опубліковано 31 січ 2022
- In this tutorial I will show you how to set the default state of the Divi Accordion module open or closed when the page loads.
Blog Post + Snippet: www.peeayecreative.com/how-to...
In this guide, I am going to talk about how you can open or close all toggles and accordions on page load. When it comes to the Toggle Module, you can set whether to expand/close it by going to the toggle module settings. But for the Accordion, you do not have any option by default to open/close all the accordions, so for that you will learn how you can do that with the help of jQuery Snippet. In this tutorial, I will show you how to set the default state of the Divi Accordion module to open or closed using jQuery.
Become a member of our Divi Adventure Club!
www.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Thanks for watching!
Ah - Thanx! I'm so happy there is smart people like you out there! :-)
You're welcome, glad you are enjoying the resources!
Thank you so much for this tutorial! Now I can use Divi accordions without feeling awkward.
You're welcome 😊
I learned a new thing whenever i watch your video
That's awesome 😎👍
Great Video. Fixed that annoying Divi feature. Many thanks for posting.
You're welcome, so glad you like it!
Perfect! That what I was looking for! Great work and nice way to teach! Thank you!
You're very welcome!
Thank you for the lesson... Looking for more.
Glad you like it, we have hundreds more and a new one each week!
Thanks Nelson ..great tip
You're welcome!
Nice one. So simple
Thanks a lot 😊
Parfait et simple ! Merci
You're welcome!
Hi! I just found you today and you have helped me with two things, immediately. THANK YOU! QUESTION: Right before this video, I followed your video on moving the icon to the left. How do I add the CSS Class: pa-accordion, when I already have pa-accordion-icon-left?
You can have as many classes as you want just separate them by a space.
@@PeeAyeCreative Thank you. I tried that. I also tried a comma and it doesn't seem to be working. I did the "move to the left" first and I added the code to the module. I did the "close" second and I added the code to the head (as you suggested in the video). I'm wondering if that could be the issue?
Hi...I'm still trying to figure this out. So, I decided to create a new accordion without the (move icon to the left) and just start with this one. It's not working for me. I followed the tutorial multiple times. Not sure what I could be doing wrong. Any thougts?
Informative video
I'm glad to hear that!
Dumb question, could i use the accordion hiding a galery module inside a tab
Say i have a tab named Phase 1 and i want to show the movie posters inside that tab is that possible in some way?
- say with shortcode or some kind of embed way?
Thanks for creating the tutorial. I'd love the title area to be expanded to accommodate a few lines of text. Is that possible?
Sure, we have lots of related tutorials on our blog and channel. Here is is: www.peeayecreative.com/how-to-add-a-second-line-of-subtitle-text-to-divi-toggle-and-accordion-modules/
Thank you!
Great video - just helped me out so much!
Great to hear!
It worked - awseome tutorial thanks so much @Pee-Aye Creative
So glad you like it!
How to change the product tabs in woocommerce to accordion and vertically?
I don't think that is what this tutorial is about.
Hi Nelson,
Thank you for this post :-) It worked! However, wenn I switch on my visual builder, the first post is open. Is it possible that, even wenn I am working in my visual builder, the first post is closed to?
Greetings, Christel Torsen (from the Netherlands)
No, anything like this with jQuery will not work in the Visual Builder.
How to close the nested accordion the inside accordion is always on upon you open te first layer of the accordion. How can I close the accordion the inner accordion?
I'm not sure what you mean, sorry!
Hi Nelson, one more question about the Toggle module :-) Wenn I am at the Toggle module and open the builder than you can set the state on OPEN or CLOSED. But, there is no responsive icon at STATE. I want the Toggle module to be open in the desktop version en to be closed on the mobile version. So, I do now have your plugin Divi Helper ( nice!) and I wonder if its possible to do it with the Divi Helper Plugin. So I hope you can give me an answer :-) Thanks Nelson! Best Regards Christel from the Netherlands.
Hi Christel, no there no way to do that with our tutorial without further customization.
@@PeeAyeCreative Oh, that is too bad, I was really hoping you would have it! Found Stackoverflow thread about it, but it didnt work for me unfortunately. in any case, thank you for the above tutorial, Nelson!! Always appreciated!!
Is there a way to make the accordion smoother? Mine isn't working smoothly.
I'm not sure what you mean, we are enor adjusting that, it is a Divi default coded animation and very difficult to change.
When you click on a toggle using an accordion, is there a way to collapse the questions once opened? The only way the toggle closes right now is if you click on the next toggle.
Correct, that's just how an Accordion works by definition. Otherwise you should use Toggles.
can we close it when we open it :)) . I mean when I open the first I need to open the second one then I can see the first one is close. Is there any solution to open the first one then click on that and close it?
By default that way an accordion works is by clicking on another one to open and close. What you described could be achieved with multiple toggle modules instead.
Is there a way to have all accordion slides open and not able to close?
Not in this tutorial. Might be confusing and mean an accordion is not the right choice
😀
🙂
Did not work for me, unfortunately. I followed the directions and there's no "state" option in the Divi > Accordion module setting afterward.
Right, thus the tutorial :)
Hmmm, nope. Still open. Has the code changed?
Nothing has changed on our end.
Doesn't work(
Hello, our tutorial does work, so if there is any issue on your site please share the details on the blog post.