The 1st Divi accordion module item is set to be open by default and there is no option to set it to be closed. If you would like all your accordion items to be closed by default there is a simple trick that makes the 1st (open) item of your accordion invisible.

This method will work without using any jQuery or extra coding as it simply adds an extra accordion item to the top of your accordion and hides it using some custom CSS added within the module itself. The result is that the rest of your accordion items below this hidden (open) one will all now have the appearance of being closed as default.

You can also add an extra, restyled accordion item to the bottom of your accordion module to look like, and function as, a close button to allow you to make all the items closed after they have been opened. Like the method above it uses a standard accordion item without any extra jQuery but re-styles it to match its purpose better.

[Video tutorial] how to close all Divi accordion items;

[A] How to make all accordion items closed by default

  1. Add your Divi accordion module and add your items within it as normal.
  2. Click on Add New Accordion Item and drag it to the top of the accordion
  3. then within that new item go into the Custom CSS tab and in the Main Element box add the following code;
    display:none;
  4. Save and preview and you will now see that all of your (visible) accordion items are closed by default.

[B] How to add a close link to close all accordion items at once

  1. Click on add new item and give it a title of CLOSE ACCORDIONS
  2. Open the Advanced Settings.
    – Set the Open Toggle Background Color: to the same as your page background color.
    – Set the Closed Toggle Background Color: to the same as your page background color.
    – Set the top padding to 0.
  3. Now open the Custom CSS tab.
    – In the main element box add border:none;
    – In the Toggle title: box add font-size:0.8em;
    – In the Toggle Icon: box add display:none;
  4. Save and preview

Closed Divi Accordion items live demo

Default Divi Accordion

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

[A] Accordions all closed

blank
Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

[B] Link to close Accordion

blank
Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

Accordion Tester

This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content. This is the accordion content.

CLOSE ACCORDION

Download the free Divi accordion layout

Too lazy to set the accordions up in your Divi site? 

  1. Download the free JSON file here
  2. Go to Divi > Divi Library
  3. Click on the Import & Export button and then on the Import tab and select the file you just downloaded
  4. You can now use the + icon in your Divi Builder to Load From Library

divi accordion layout download

 

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close