How To Make The Divi Accordion Closed On Page Load

I’m going to show you how to make the Divi Accordion close on page load.

‍

Normally, with most accordion menus, the first tab is initially opened on page load, even with Bootstrap, as you can see in their example or demo. The difference is that you can easily control the open tab in Bootstrap.

Some of you are probably wondering how to make the first tab close or all tabs close on page load.

Here is a quick tutorial on how it is done; let’s begin.

Let’s start by adding a new section and row to your Divi, then insert the Accordion Module.

In this video, I will leave all the text as it is right now. I will just format the design. You can play around with the color, text, and sizing.

‍

Once you are done editing, click on the “Accordion Settings” Advanced tab, not the accordion item settings. Open the CSS Id & Classes and under CSS Class, input “custom_accodion_tab”. Save your menu by clicking the green button with the check icon.

Space. Save your project and exit the visual builder.

‍

Next, on your WordPress dashboard, navigate to Divi, then go to the Integration section and copy and paste the code below into the head part of your Divi. Make sure you add an opening and closing script tag, otherwise your code will not work.

‍

Click “Save Changes” and go back to your page and hit refresh.

That’s it. A simple way of making Divi Accordion’s first tab closed by default.

‍

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