The 1st Divi accordion module item set to be open by default, but if you would like to make all your accordion items to be closed by default you can use this work around method. This trick works without any jQuery or extra coding and simply adds an extra accordion item to the top of your accordion and hides it using some custom CSS. The result is that the rest of your accordion items will all now be closed as default.

You can also add an extra, restyled accordion item 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 ises a standard accordion item but re-styles it to match its purpose better.

Take a look at how to close Divi accordion items here;

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 item and then within that new item go into the custom CSS tab and in the main element box add the following code display:none;
3. Drag this new item to the top of your list of accordion items.
3. Save and preview and you will now see that all of your accordion items are closed by default.

Add a close link to close all accordion items

1. Click on add new item and give it a title of CLOSE ACCORDION
2. Within that new item open the advanced settings and set the Open Toggle Background Color: and Closed Toggle Background Color: to the same as your page background colour. Set the top padding to 0.
3. Within that new item go into the custom css tab and in the main element box add border:none; In the Toggle title: box add font-size:0.8em; and in the Toggle Icon: box add display:none;
4. Save and preview ūüôā

Closed Divi Accordion items 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.

All closed 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.

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
Too lazy to set the accordions up in your Divi site? download the .json file here.
/* Old method below no longer works with current versions of Divi so Use the method above which works on current versions */
The 1st Divi accordion is open by default, but if you would like them all to be closed try adding the following jQuery script into the footer of your code.

<script>
jQuery('.et_pb_accordion .et_pb_toggle').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
</script>

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

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