How To Make First DIVI Accordion Box Closed By Default

All DIVI accordion elements collapsed and closed

DIVI's accordion feature is easy to set up and use but it does have a few limitations. One of them is the ability to have the first accordion box automatically closed/collapsed by default. The problem is, this isn't a feature that's available in the backend. With all DIVI's functionality, you'd think that this was an option that could be toggled on and off in the backend, but it isn't.

I love Brian Shim's comparison where he says it's a bit like "having one of your dresser drawers open in your bedroom" - Who says web developers don't have a sense of humor?!

Anyway, there are a few articles on the internet that explain how to do this. Essentially, there are two fairly straightforward ways to make DIVI's top accordion box element closed by default so we'll show you both here. Method one is my favorite as it uses a super-simple way involving a tiny bit of CSS. It's easy to implement and can be done in a few minutes. Method two involves adding jQuery (a lightweight JavaScript library) to DIVI's <head> section, which all sounds a bit scary! Nevertheless, it's still fairly easy and works just as well (for the moment at least).

So, if you have a big block of text in DIVI's first accordion box and you want it hidden or the box closed by default when a user first visits the page, here are both methods - Just go ahead and pick your preferred one:

Closed DIVI Accordion Method One - CSS

Below is an image that you're probably already familiar with if you've found this page. It's the default 'top drawer open', which is not what most people want.

 DIVI's Accordion is open by default

 In order to add the necessary CSS to make the first top box closed by default, we firstly add a blank element to our DIVI accordion.

Add a new blank DIVI element to the accordion

 Next, in the Accordion settings, we drag the box we just created to the top of the element list (as below)

Drag The DIVI accordion element to the top of the list

We then go to the settings of the top element that we just added and go to the "Advanced" tab and click on the "Custom CSS" option. Add the following bit of CSS


display:none;


to the 'Main Element' box as in the image below:

Add the CSS in the Main Element box of the DIVI accordion element

 Save it and we're done - Your top element of DIVI's accordion should now be closed by default for new visitors to your web page.

Closed DIVI Accordion Method Two - jQuery

In some respects, this method for keeping the top accordion box closed is easier, but I personally don't like to add script to the <head> of my pages if I can avoid it. Anyway, if this is your preferred method, here's what you do:

Firstly, in the backend of Wordpress, go to your DIVI 'Theme Options' as below:

Go to DIVI Theme Options

Next, we click on the "Integration" tab and add the following jQuery code to the <head> section:


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

Add jQuery code to DIVI's head section

 Once added, simply save it and go to your DIVI accordion page. You should now see (for both methods) the final result of all accordion elements all closed and collapsed. Either way, job done!

DIVI tips and tricks:

How To Make First DIVI Accordion Box Closed By Default

How to put DIVI buttons inline, side by side and next to each other.

How to make Hyperlink Color and Hover Color Change in DIVI.

How to Insert An Image Caption in a DIVI Module (Without CSS)