{"id":13064,"date":"2019-08-17T06:33:02","date_gmt":"2019-08-17T04:33:02","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=13064"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-make-the-divi-accordion-closed","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-make-the-divi-accordion-closed\/","title":{"rendered":"How to Make the Divi Accordion Closed"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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\u2019t use the first toggle and start your content on the second one). The second method we will close the toggle with some jQuery code.<\/p>\n\n\n\n

You can also use the Divi Booster<\/a> plugin to close the first tab.<\/p>\n\n\n\n

Method 1: hide the first toggle with CSS<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"Accordion<\/figure>\n\n\n\n

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

display: none; <\/code><\/pre>\n\n\n\n
\"Hide<\/figure>\n\n\n\n
And that\u2019s it! You have now hidden the first tab and start with tab 2, and this one is closed by default.<\/p>\n\n\n\n
Keep in mind that you can\u2019t use the first toggle now, we have it hidden. So start with toggle 2.<\/p>\n\n\n\n
Method 2: use jQuery to close the first accordion tab<\/h2>\n\n\n\n
Place the following jQuery in Divi > Theme Options > Integration > Add code to the < head > of your blog<\/p>\n\n\n\n
<script>\njQuery(function($){\n    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');\n\n    $('.et_pb_accordion .et_pb_toggle').click(function() {\n      $this = $(this);\n      setTimeout(function(){\n         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');\n      },700);\n    });\n});\n<\/script><\/code><\/pre>\n\n\n\n
This jQuery code will close the accordion tab by default. With this method, you can still use the first toggle.<\/p>\n\n\n\n
You might also like\u2026<\/h3>\n\n\n\n