Make Divi Accordion Module Tabs Closable

Divi includes an accordion module which lets you place content in expandable boxes, useful for things like FAQs sections. Normally Divi will always keep one accordion tab (or toggle) 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.

Note: see this post if you'd like to make the Divi accordion tabs start closed by default.

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.

Making Accordions Closeable using Divi Booster

Divi Booster adds hundreds of new options to Divi, including the option to make accordions closeable. This can be applied to individual modules, or to all modules at once.

Making Individual Accordions Closeable using Divi Booster 

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"

Making All Accordion Modules Closeable using Divi Booster

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 option has been available since Divi Booster v1.9.9.

Make Accordion Modules Closeable using jQuery / CSS

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_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
    display: block!important;
    content: "\e04f" !important;
}

Styling the Close Icon

With any of the above methods of making accordions closeable, the close icon inherits the styles of the built in "open" icon. That means you can style both the open and close icons using the existing options in the accordion module settings, e.g.: 

If you wish to apply certain styles to the close icon only (i.e. not to the open icon), then you can do so using CSS such as this:

/* Normal state */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
	color: grey !important;
}

/* Hover state */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:hover:before {
	color: blue !important;
}

The example above will make the icon grey normally, changing to blue when hovered. If you aren't sure how to get the effect you want, just give me a shout in the comments.

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

Divi Booster

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

121 Comments

  1. Thank you! Amazing post!

    Reply
    • You're welcome, Renzo!

      Reply
  2. Hey there! I've followed the instructions and the icon appears, but it doesn't close the accordion module. Any ideas why this might be the case? Thank you!

    Reply
    • Hey Gillian! Thanks for reaching out. It sounds like an issue with the jQuery code – either it isn't working on your site or something is blocking it from running. Are you able to share the URL of the page where you've set up the accordion so I can take a closer look? In the meantime, try clearing your caches just to make sure you're not seeing an older version the page. Thanks! Dan

      Reply
  3. Thank you.This one solve my problem.

    Reply
    • Great! Glad it helped SuB HerO :)

      Reply
  4. Thank you very much! It's great!

    Reply
    • You’re very welcome, Mikhail!

      Reply
  5. how can i style the icon you added to the toggle tab when closed?

    Reply
    • Hey Christina, I've just added a section to the post on styling the close icon. The process is the same, regardless of which method you used to make the accordion closeable. If you need any help getting it to look how you want, just let me know (with a link to the page you're working on, if possible). Thanks!

      Reply
  6. I have added the code as instructed but my accordions still done close. I know the code is working but this line never gets true if ($toggle.hasClass('et_pb_toggle_open')) {

    As other people have this working I am wondering what I am doing wrong.

    Reply
    • Hey Ralf, the code is still working for me in the latest version of Divi, so I'm not sure yet why it's not working for you. Is there any chance you're able to share a link so that I can take a look?

      The 'et_pb_toggle_open' class is applied by Divi to any open toggles in the accordion, so that line should in theory be true whenever the clicked accordion toggle is initially open…

      Reply
    • I just implemented this solution, but in a slightly different way. Rather than putting the javascript in the Theme Options > Integration > Head of my site, I put the script in a Code Module BELOW the Accordion Module, right on the page. I did this so that the script only loaded on the page where I needed it.

      The solution is working as expected – thank you for sharing this solution!!

      Is there a way to force the accordion to be all closed by default?

      Reply
      • You're welcome, Jono. The code module is a great way to load Javascript on a single page – good to hear the code works in this configuration. Thanks! This post describes how to start accordions closed by default:

        https://divibooster.com/make-divi-accordions-closed-by-default/

        You should be able to place that in the same code module (or an additional one), if you wish. Hope it helps.

        Reply
  7. I try with with both code you mentioned, and three of your CSS working together, the site is working fine now!

    Thank you very very much for your share.

    however, do you know how to add ICON to Accordion?

    Reply
  8. How can I change the icon in the open-state? It's still the same when I open it what doesn't make any sense as I want a "-" sign to close and a "+" sign to open. Please help

    Reply
    • Hey Carola, both the Divi Booster feature and the manual method (if you follow the optional step 2) should give a "-" sign for closing the accordion tabs. But if it isn't working for you, is there any chance you're able through a link to the page you're working on so that I can take a look for you? Cheers!

      Reply
        • Hey Maurice, it looks like Divi's own styles are taking priority. I've updated the CSS in the post to be slightly more specific, which means it should override Divi's own styles and get the (-) icon showing. Note that the issue isn't one of positioning as that site suggests. The version of the code posted there also doesn't work as-is because the quotation marks are being modified from straight to curly quotes. Hope that helps!

          Reply
          • That worked great! Thank you very much

          • Great! You’re very welcome, Maurice!

    • 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
      • Hello, Dan. I have exactly same problem with Stephanie Parr, the close icon works fine, but its not show up on the page…
        By the way, what you shared is very very useful, thank you.

        Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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