How to Make All Accordion Items Closed by Default in Divi

When you visit a website’s FAQ page, you may often get an accordion item list with each question becoming a header in each item. Many readers are coming to find an answer to only one or two questions and the accordion gives people control over what to read, and when, that’s why the accordion is perfect for it.

However, the first item of the Accordion module in Divi is open by default, even when you want it to be closed at first, there is no setting option for it. Fortunately, there is some trick we can use to make it so.

In this post, we will show you how to make the accordion’s first item closed (or look like it) by default in two ways.

• By hiding the first toggle item.
• Use a shortcode to close the first item.

Let’s get into practical, shall we?

Hide the First Item

First, edit or create a page you want to use the accordion using Divi Builder. Once you’re in the editor, add the Accordion module and open the Accordion Settings, then open the first toggle item setting.

From there, continue by moving to the Advanced tab → Custom CSS → Main Element then add the following snippet.

display: none; 

The setting in your editor will be something like the following.

Once the code is in place, in the editor, you’ll see your accordion first item is missing and the second item toggle is still closed. That way you can start from the second item toggle to start your accordion list.

Use a Shortcode

To make the accordion item closed by default with the shortcode, you will need to add a code module to the editor and then paste the following code into the Code Settings → Text → Code.

The shortcode:

<script>
jQuery(function($){
    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');

    $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
    });
});
</script>

And this is what it looks like in the editor.

Once you apply the code, there won’t be any visible changes in the editor, however, you can see its effect on the front-end preview of your website or after you publish the page.

The above tutorial is for a single page only. If you have some accordion on the other pages previously created, then you may want to apply the code to your website by going to the Divi → Divi Theme Options → Integration tab, then paste the code in one of the editors there.

Bottom Line

Besides for FAQ page, you can use an accordion to improve the user experience, for instance, if you need to fit a lot of content on a small screen like a mobile device, then an accordion can help the reader to give an overview of the page content with a little scrolling of the page.