How to make Divi accordion closed by default

The Divi accordion module displays content in a collapsed vertical list.

When an item in the accordion is opened, the previously opened item is closed.

By default, the first Divi accordion item is open.

If you would like to make your divi accordion module closed by default you can use either of the following methods.

• Add an extra accordion item to the top of your accordion and hide it using CSS.
• Use JQuery to close the first accordion by default

Option 1. Closed accordion items using CSS

This method simply uses CSS added to Divi to hide the first accordion which is the one that is open by default.

To use this method you will need to follow the following steps;

1. Add an accordion module and add your accordion items as usual.
2. Click on add new item
3. In the top accordion item, you just added go into the custom CSS tab and in the main element box add “display:none;”
4. Drag this new accordion item to the top of your accordion items list.
5. Save and preview the page and you will now see that all of your accordion items are closed by default.

Optionally add a text link to close all accordion items.

To do this you will need to add the following steps to your accordion module;

1. Click on add new item and give it a title of CLOSE ACCORDION
2. Within this new accordion item open the advanced settings and set the Open Toggle Background Color: and Closed Toggle Background Color: to the same as your page background color.
3. Set the top padding to 0
4. Within this new accordion item go into the custom CSS tab and in the main element box add “border:none;”
5. In the Toggle title: box add “font-size:0.8em;” and in the Toggle Icon: box add “display:none;”
6. Save and preview the page and you will now see that all of your accordion items are closed by default and you can also close any open toggle with the new text link.

Option 2. Closed accordion items using jQuery

This method uses jQuery to close all accordions by default when an accordion module is loaded. You can choose to apply this close to all accordions on your website or to target specific accordions only.

To use this method you will need to follow the following steps;

If you want to apply this code for all accordion modules on your website you will need to follow the following steps;

1. In your WordPress dashboard and navigate to Theme options > Integration > Add code to the < head > of your blog
2. Add the following code

   script>
   jQuery(document).ready(function() { jQuery('.et_pb_module.et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
   });
   </script>

3. Save and preview the page and you will now see that all of your accordion items are closed by default.

Optionally, If you want to apply this code for specific accordion modules on your website you will need to follow the following steps;

1. Go to your Accordion Module Settings > Advance > Custom CSS Class and add the class as open_accordion
2. In your WordPress dashboard and navigate to Theme options > Integration > Add code to the < head > of your blog
3. Add the following code

   <script>
   jQuery(document).ready(function() { jQuery('.et_pb_module.et_pb_accordion.open_accordion .et_pb_accordion_item.et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
   });
   </script>

4. Save and preview the page and you will now see those accordion items are closed by default on specific modules with the CSS class “open_accordion”.

Watch the video showing closed Divi accordion items;

If you prefer to learn by watching then you can view the Divi accordion module closed by default YouTube video. The video will show you how the custom CSS method works by hiding the top accordion item from the page so that all remaining visible accordion items will then appear to be open by default.