Many people who use the WordPress Divi accordion want it to start out closed by default. Every WordPress client that I’ve used it for has asked for that, and there are many people online asking about it.
The way it works now is that the first element of the accordion defaults to open, which looks kind of strange.
The Solution: Make an Invisible First Row!
The solution I came up with is to make a dummy first row which is invisible!
After you create your regular accordion items, create one with the title of “Invisible” (actually, it can be called whatever you want).
Go to the Custom CSS tab for that item and scroll down to Toggle Title. Enter “display: none;” here as shown below.
Save the item.
Next, drag it to the top of the Item list so that it is first as shown below:
Save the module and the page.
Voila! The accordion should appear closed when you go to your site! Check out this screenshot:
How it Works
In reality, the first item of the accordion is open. But, it’s invisible, so the real accordion elements that you care about all look closed!
Clicking any visible element will open it as usual. No one will know there’s an invisible one there!
As a bonus, you get a line on top, which is something that I think makes it look nicer. If you don’t like it, you can “display:none” the entire first row (not just the text).
Bonus – How to Make a “Close Accordion” Button
The other thing that everyone asks for is the ability to close an accordion element by clicking it again. Right now, the only way to close one is to open another. There’s no way to close all elements in the default accordion.
But, you can use a variation of the technique I described above to create a “close all” button. Simply create an accordion item with no content, but with the title, “Close All” (or whatever you want the button to be called).
I recommend styling it differently to make it look more like a button. I added CSS to the Toggle Title area of the Custom CSS section to make the font smaller and lighter than the other accordion titles.
Finally, hide the plus button by adding “display:none;” to the Toggle Icon area of the Custom CSS section of the item.
Voila! This accordion item will behave just like a “close accordion” button. But, all it is is an accordion item with no content!
There is a paid plugin called Divi Booster that claims to let you close an open accordion item by clicking it again (which is really what we want), but I haven’t tried it yet.
Elegant Themes, please get on this! Until then, hope these hacks are helpful.
Let me know in the comments what you think. – Brian