[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Make the Divi Accordion Closed

Mark Hendriksen | August 17, 2019 | 35 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

By default, the first toggle on the Divi accordion is open and there is no option to make it closed. Fortunate there is a simple trick to make the first toggle also closed.

I will show you two methods of how you can make the accordion closed. The first method is a clever way to hide the first toggle with CSS (and just don’t use the first toggle and start your content on the second one). The second method we will close the toggle with some jQuery code.

You can also use the Divi Booster plugin to close the first tab.

Method 1: hide the first toggle with CSS

This is a very easy and simple method, first create an accordion with a couple of toggles. In my example, I have created 3 toggles.

Accordion example with 3 toggles

Now open the first toggle and go to the advanced tab. Under Custom CSS > Main Element fill in the following CSS:

display: none; 
Hide the first accordion toggle with CSS

And that’s it! You have now hidden the first tab and start with tab 2, and this one is closed by default.

Keep in mind that you can’t use the first toggle now, we have it hidden. So start with toggle 2.

Method 2: use jQuery to close the first accordion tab

Place the following jQuery in Divi > Theme Options > Integration > Add code to the < head > of your blog

    $('.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);

This jQuery code will close the accordion tab by default. With this method, you can still use the first toggle.

You might also like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

35 thoughts on “How to Make the Divi Accordion Closed”

  1. Hi Mark,
    Thanks for the lesson on the Divi accordian feature. I’d been experimenting with alternatives for same reason and got close – using a blank first accordian tab – but didn’t think to use your CSS technique. Problem solved now though. Appreciate your clarity and help!

  2. The CSS solution is so simple it’s great, which I had found your page before spending half an hour looking for the option and thinking about a solution.

  3. You. Beautiful. Bastard.

    Clean, clear, simple, and effective. This tip is a masterclass in how to … well, How To.

    Many, many thanks!


Leave a Comment