By default, the tabs of the Accordion Module in Divi cannot be closed. The opened tab can only be closed when clicking on another accordion tab. Today, we will be focusing on how to close an open accordion tab without having to press another, and also to have a “close” icon that you can click!

This tutorial will only require you to copy and paste a simple jQuery/Javascript code and a CSS Code. Don’t you worry if you’re not familiar with this, with this tutorial I’ve made, it’s pretty simple to follow.

Let’s get to it!

(In case you’re looking for a tutorial on how to have all the accordion tabs closed by default, click here.)

Sample

Accordion 1
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Accordion 2
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Video Tutorial:

Tutorial

Step 1: Find Where To Add jQuery Code

If you’re not familiar with jQuery, don’t you worry! It’s pretty simple. But, first, let’s find out where to add this code. Head to your WordPress dashboard > Divi (on the left) > Theme Options > Integration > Add code to the < head > of your blog

Step 2: Add jQuery Code

Now that you’ve found where to add it, here’s the code:

<script>
jQuery(function($){
 $('.et_pb_toggle_title').click(function(){
  var $toggle = $(this).closest('.et_pb_toggle');
  if (!$toggle.hasClass('et_pb_accordion_toggling')) {
   var $accordion = $toggle.closest('.et_pb_accordion');
   if ($toggle.hasClass('et_pb_toggle_open')) {
    $accordion.addClass('et_pb_accordion_toggling');
    $toggle.find('.et_pb_toggle_content').slideToggle(700, function() {
     $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');

    });
   }
   setTimeout(function(){
    $accordion.removeClass('et_pb_accordion_toggling');
   }, 750);
  }
 });
});
</script>

That’s it for adding the jQuery code! Make sure to click the “Save Changes” button! Then, now, let’s head to the next part.

Step 3: Find Where To Add CSS Code To Have “Close” Icon On Accordion Tab

Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Step 4: Add CSS Code & Publish

Now, we can add this code:

.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\e04f";
}
If you already have some CSS codes in there, you can add this code at the top or at the bottom; the positioning doesn’t really matter as much.

And then, make sure to click the Publish button!

And that’s it! Now, look at your Accordion Module tabs and try them out yourself. They can now be closed and have an icon that you can click to close them.

If you have any questions or inquiries about it, please do not hesitate to ask, and I will be happy to help!

If you have watched the video tutorial, and it has helped, please do Like, Comment & Subscribe! Thanks!