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 theof 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 thesection:
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