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.
Now open the first toggle and go to the advanced tab. Under Custom CSS > Main Element fill in the following CSS:
display: none; 
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
<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>This jQuery code will close the accordion tab by default. With this method, you can still use the first toggle.
Thanks ! I appreciated the Help!
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!
Thanks for the trick, so useful ! 😉
Worked like a charm. Thanks for making that so easy!
Thank you! This the easiest way!
Thanks Mark. Great tip on the display: none for item 1. Didn’t think of that myself so here to say THANKS!
Excellent Tip and Trick. Thank You.
Thank you so much, very helpful!
Thanks a million, man!
Thank you.
thank you, works great!
Worked like a charm!
Thank you.
Thank you so much! Took 2 minutes (less?) and worked perfectly. Really appreciate it!
You’re welcome Karen
Absolutely perfect.
Thank you so much!
Wow! That was easy! Thank you!
Thanks for sharing.
THANK YOU ! Can’t understand why it isn’t in the settings
Fantastic, we like simple
Well done!!!!😍
Many thanks! Exactly what I was looking for.
Thanks so much! Now how to allow a single accordion to be closed once opened – any ideas!?
Hi Nick,
Do you mean you want to use an accordion with one toggle?
In that case, just use the toggle module instead of the accordion module.
That’s the one! Thanks so much, Mark, I didn’t know there was a toggle module!
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.
You. Beautiful. Bastard.
Clean, clear, simple, and effective. This tip is a masterclass in how to … well, How To.
Many, many thanks!
Thank you very much Doug 😀
Works! Thank you…
Good to hear Sanne
still works, thank you very much
Thanks a lot!!
This simple workaround worked great for me. Thanks for posting.
Your welcome Julie
Thanks a lot, I was trying other two methods that didn’t work but your did!.
Hi Litbea,
Good to hear it worked out