When you use the Accordion Module by Divi, the very first tab is open immediately. Then, when you click the other tabs, the initially opened tab will close. So, basically, only one tab can be opened when using the Accordion Module.

For some, even for myself, I do prefer, at some layouts or designs, that all the tabs are closed at first, and they can only be opened when one of the tabs are clicked. If you want that, too, but not sure on how to do it, here’s a very easy tutorial for you to follow!

Let’s go!

Sample

Before

After

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

And that’s it! Make sure to click the “Save Changes” button! Now, you can go back to where you added the Accordion Module, and you can see that all the tabs are now closed by default.

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!