The 1st Divi accordion item is open by default, but if you would like to make all your accordion items to be closed by default you can use this updated method that was left in the comments below by Brian Shim. This new method works without any jQuery, by adding an extra accordion item to the top of your accordion and hiding it using css. The result is that the rest will all be closed as default.

You can also add an extra, restyled accordion item to act like a close button to allow you to make all the items closed after they have been opened.

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

Make all accordion items closed by default

1. Create your 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 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 Accordion items Demo

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.

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.

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

/* 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>

Comments

comments

Pin It on Pinterest

Share This
Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!