How to Set the Accordion Module in Divi to Stay Closed by Default

When creating a clean website experience, it’s helpful to have your accordion modules remain collapsed when the page loads. By default, Divi’s Accordion Module opens the first item. Let’s fix that using two simple methods: custom CSS or custom JS.

Method 1: Custom CSS and an Empty Accordion Item

1. Open the Accordion module settings.
2. Add a new accordion item and drag it to the top.
3. In the new item, remove both the title and body text.
4. Go to Advanced Tab → Custom CSS → Free Form CSS and add this code:

selector {
  display: none;
}

Now, your accordion will stay closed when the page loads.

Method 2: Custom JS Code

1. Open the Accordion module settings and set a CSS class (e.g., dt-closed-accordion) under Advanced Tab → CSS ID & Classes.
2. Go to Divi → Theme Options → Integration tab → Header and add this JavaScript code:

For a site-wide solution where all accordions stay closed by default, use this code instead:

That’s it! Now, your Divi accordion modules will start in a closed state, offering a more streamlined user experience.