How to Close All Accordions – DIVI

DIVI is a great tool but sometimes we have to make slight “Advanced” adjustments (styles) to make the modules function as we need.  In this short piece, I will show you how to make one change that will close all of your accordions  (default in DIVI is to open the first one).

Accordion Module

The accordion is very easy to use. You simply add the title and content of each option in the accordion and save.  Once you have built your accordion and preview it, you will notice that the top option is set to be open.  Recently I had a project that required all options to be closed upon visiting the web page.  In my scenario, each option opened to a registration form and we wanted the visitor to be able to make their own choice from a closed state.

This can be achieved but adding one line of code.

Creating a Hidden Option

Press the + to add a new option in your accordion.  Do not give it a title, instead, skip to the “Advanced” tab to add Custom CSS.  In the Main Element, add the following:



Now, take the new hidden option and drag it to the top of your accordion.  Save your accordion and save your page.  Now your DIVI accordion is closed by default.