DIVI’s accordion feature is easy to set up and use but it does have a few limitations. One of them is the ability to have the first accordion box automatically closed/collapsed by default. The problem is, this isn’t a feature that’s available in the backend. With all DIVI’s functionality, you’d think that this was an option that could be toggled on and off in the backend, but it isn’t.
I love Brian Shim’s comparison where he says it’s a bit like “having one of your dresser drawers open in your bedroom” – Who says web developers don’t have a sense of humor?!
So, if you have a big block of text in DIVI’s first accordion box and you want it hidden or the box closed by default when a user first visits the page, here are both methods – Just go ahead and pick your preferred one:
Closed DIVI Accordion Method One – CSS
Below is an image that you’re probably already familiar with if you’ve found this page. It’s the default ‘top drawer open’, which is not what most people want.
In order to add the necessary CSS to make the first top box closed by default, we firstly add a blank element to our DIVI accordion.
Next, in the Accordion settings, we drag the box we just created to the top of the element list (as below)
We then go to the settings of the top element that we just added and go to the “Advanced” tab and click on the “Custom CSS” option. Add the following bit of CSS
to the ‘Main Element’ box as in the image below:
Save it and we’re done – Your top element of DIVI’s accordion should now be closed by default for new visitors to your web page.
Closed DIVI Accordion Method Two – jQuery
In some respects, this method for keeping the top accordion box closed is easier, but I personally don’t like to add script to the <head> of my pages if I can avoid it. Anyway, if this is your preferred method, here’s what you do:
Firstly, in the backend of WordPress, go to your DIVI ‘Theme Options’ as below:
Next, we click on the “Integration” tab and add the following jQuery code to the <head> section:
Once added, simply save it and go to your DIVI accordion page. You should now see (for both methods) the final result of all accordion elements all closed and collapsed. Either way, job done!
DIVI tips and tricks:
How to make Hyperlink Color and Hover Color Change in DIVI.