If you’re using the Divi theme’s Accordion module, you’ve probably noticed a common limitation: clicking an open tab’s title doesn’t close it. Instead, it stays open, forcing you to open another tab or reload the page. This can be frustrating if you want classic toggle behavior: clicking an open tab closes it.

Why does this happen?

Divi’s Accordion module is built with specific JavaScript handling that allows only one tab open at a time, and clicking an open tab’s title doesn’t toggle it closed. It just stays open. Divi’s internal scripts control styles, icons, animations, and the open/close state by adding/removing specific CSS classes like .et_pb_toggle_open.

Our goal? Make the accordion tabs toggle closed/open by clicking the title, just like a true toggle accordion.

The Solution: Custom jQuery to control the toggle behavior

After testing several approaches, we found the most reliable way is to bypass Divi’s internal toggle JavaScript and handle open/close logic ourselves with jQuery. Here’s the working script that toggles the .et_pb_toggle_open class and slides the content open/closed smoothly.

jQuery(document).ready(function($) {
  $('.et_pb_accordion .et_pb_toggle .et_pb_toggle_title').on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    const $toggle = $(this).closest('.et_pb_toggle');
    const $content = $toggle.find('.et_pb_toggle_content');

    if ($toggle.hasClass('et_pb_toggle_open')) {
      // Close the open tab
      $toggle.removeClass('et_pb_toggle_open');
      $content.slideUp(300);
    } else {
      // Open clicked tab
      $toggle.addClass('et_pb_toggle_open');
      $content.slideDown(300);
    }
  });

  // Initially hide all content except the ones that are open by default
  $('.et_pb_accordion .et_pb_toggle').each(function() {
    const $toggle = $(this);
    if (!$toggle.hasClass('et_pb_toggle_open')) {
      $toggle.find('.et_pb_toggle_content').hide();
    }
  });
});

Where to put this code?

Option 1: Using a Child Theme (recommended for developers)

1. In your child theme folder, create or edit a JavaScript file. For example:
   /wp-content/themes/your-child-theme/js/scripts.js
2. Paste the jQuery code above into that file.
3. Enqueue the script in your child theme’s functions.php file:

function divi_child_enqueue_scripts() {
    wp_enqueue_script(
        'divi-custom-accordion',
        get_stylesheet_directory_uri() . '/js/scripts.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'divi_child_enqueue_scripts');

4. Clear caches and reload your site.

Option 2: Using Divi Theme Builder’s Integration > Add Code feature

1. In your WordPress admin, go to Divi > Theme Builder.
2. Open the Integration tab.
3. Find the Add code to the (good for tracking codes etc.) section.
4. Wrap the script in <script> tags and add it like this:

<script>
jQuery(document).ready(function($) {
  $('.et_pb_accordion .et_pb_toggle .et_pb_toggle_title').on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    const $toggle = $(this).closest('.et_pb_toggle');
    const $content = $toggle.find('.et_pb_toggle_content');

    if ($toggle.hasClass('et_pb_toggle_open')) {
      $toggle.removeClass('et_pb_toggle_open');
      $content.slideUp(300);
    } else {
      $toggle.addClass('et_pb_toggle_open');
      $content.slideDown(300);
    }
  });

  $('.et_pb_accordion .et_pb_toggle').each(function() {
    const $toggle = $(this);
    if (!$toggle.hasClass('et_pb_toggle_open')) {
      $toggle.find('.et_pb_toggle_content').hide();
    }
  });
});
</script>

5. Save changes, clear caches, and reload your site.

Summary

• Divi Accordion tabs don’t close when clicking open tab titles by default.
• Using custom jQuery toggle logic, you can add classic open/close toggle behavior.
• You can implement this either via your child theme’s JavaScript file or through Divi’s Theme Builder code integration.
• This approach preserves Divi’s CSS styling and uses smooth slide animations.