Make Divi Accordion Module Tabs Closable

Ever since posting on how to make the Divi accordion tabs start closed by default, I've received requests for something related – the option to re-close accordion tabs once they are opened.

Normally Divi will always keep one accordion tab open, and the only way to close a tab is to open another. If you'd like your users to be able to close accordion tabs without needing to open another (i.e. so that all tabs are closed), here's how to do it.

Example of a Closable Accordion

The following example shows the feature in action. Click to open the accordion tabs and you'll then be able to close them again by clicking either on the toggle "close" icon, or on the toggle title itself.

How hot is the sun?
Really, really hot.
Is the moon really made of cheese?
Nope.
Do you want closable Divi accordion toggles?
Go on then.

Method #1: Using Divi Booster

This feature is included in Divi Booster. My Divi Booster plugin is the easiest way to customize Divi, allowing you to make hundreds of useful modifications to Divi with just a few clicks - no code needed!

Divi Booster adds an option to make individual accordions closeable into the Accordion Module settings.

You'll find it at:

  • Divi Booster 2.9.5 upwards: "Accordion Module Settings > Design > Toggle > Closeable"
  • Divi Booster 2.8.4 – 2.9.4: "Accordion Module Settings > Design > Title Text > Closeable"

It is also possible to make all accordions on the site closeable using the option found under "Modules > Accordion" on the Divi Booster settings page. This older option has been available since Divi Booster v1.9.9.

Method #2: Manually adding jQuery / CSS to Divi

If you don't have Divi Booster and are comfortable with adding jQuery / CSS code to Divi, you can make the accordions closable using the following method. 

Step 1: Add the following jQuery code to your site, e.g. by pasting it into the "Divi > Theme Options > Integration > Add this code to the head of you blog" box.

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

Step 2 (Optional): To add a "close" icon to the open toggles, add the following CSS code to your site, e.g. by pasting it into the "Divi > Theme Options > General > Custom CSS" box.

.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block !important;
	content: "\e04f";
}

Adding a Second Close Icon at the Bottom of Toggles

If your accordion toggles contain a lot of text, you may want to add a second close icon at the bottom to save your users having to scroll all the way back to the top of the text to close the toggle. Here's the code to do this. It should be used in addition to either the Divi Booster / manual methods given above. The code can be placed either in a code module on the page in question, or in the "Divi > Theme Options > Integrations > Add Code to the Head of your Blog" box.

<script>
	jQuery(function($){
		$('.et_pb_toggle_title').each(function(){
			var $title = $(this);
			var $closebar = $title.clone(true).addClass('db_pb_toggle_close2').html(' ');
			$title.closest('.et_pb_toggle').append($closebar);
		});
	});
</script>
<style>
	.et_pb_toggle_close .db_pb_toggle_close2 {
		display: none; 
	}
	.db_pb_toggle_close2 { 
		margin-top: 10px; 
		visibility: hidden;
	}
	.db_pb_toggle_close2:before {
		visibility: visible;
	}
</style>

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

98 Comments

    • Hey Stephanie, I can't see the CSS for adding the close icon being applied to your site. If you haven't added it yet, here it is (same as in the post):

      .et_pb_toggle_open .et_pb_toggle_title:before {
      	display: block !important;
      	content: "\e04f";
      }
      

      Try adding it in the "Divi > Theme Options > General > Custom CSS" box to see if that works.

      If you've already added it / it still doesn't show, I can see you've got some form of caching on your site. Try clearing your caches and refreshing the page – hopefully that will get it showing up.

      Let me know if that doesn't fix it. Thanks!

      P.S. I tested the CSS above against your site and it made the close icon show correctly, so once it's getting added to the live page you should be good to go.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *