How To Add The Missing Icon To The Opened Divi Accordion Module Item Tutorial by Pee Aye Creative

How To Add The Missing Icon To The Opened Divi Accordion Module Item

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to add the missing Divi Accordion module icon when the toggle is opened.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Divi Accordion Module

The first step is to add a custom CSS class to the specific Divi Accordion module that you want to add the icon. We do this so that the snippet affects only the module you want to add the icon to on your site, which allows you to choose which ones remain normal and which ones have this specific icon code.

Open the Accordion module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-add-accordion-icon” in the CSS Class input field.

add a custom class to add an icon to the open Divi accordion module

2. Add The CSS Code Snippet To Your Site

The rest of the tutorial is just as easy. Now that the class is added, you can go ahead and copy and paste the CSS into your site. As soon as you do this, the missing icon will appear in the opened Divi Accordion module item.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*add icon to the opened accordion*/
.pa-add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	content: "\e04f";

Optional: Replace Icon

You can notice in the code snippet, we are adding an icon code with the content property. This is the solid negative icon (to match the positive icon) which is one of the built-in ETModules icons that comes with Divi. You can change the icon value as per your personal preference using the Elegant Icon Font icon codes.

Color & Size

The color and size settings for the regular closed icon will apply to this icon as well, so feel free to adjust that in the module settings. If you prefer to use a different color for the opened icon, simply add the desired color property and value it into the snippet above.

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Neil

    Hi Nelson,

    Nice one – thank you 🙂 You’re website tutorials are a great resource to me and every other Divi user I think. Thank for your time. Much appreciated 🙂


  2. Courteney


    I feel the same way Neil does. I always end up on your page. anyways, I added to code but the button does not give the action to close. help!

    • Nelson Lee Miller (aka The Divi Teacher)

      I’m glad you find our resources helpful! Can you elaborate on what you mean about adding the code but the button does not give action? Is the question related to the tutorial?

      • Tony Abbott

        Hi Guys, it is referring to the icon which does of course appear, but when you click on it the accordion does not close. There is missing CSS or jQuery to make this workable.

      • Hemant Gaba

        The guide is about to display the icon after the accordion opens, the guide is not about making the icon work in order to close it on click.

  3. Martina

    Thank you and how can I include my own icon image (SVG, Webp or JPG), so none of Elegant Icon Font icon codes. For example a filled circle or a special representation of a speech bubble? Thank you Nelson

    • Hemant Gaba

      Hey Martina,

      Could you please share the URL of the page where the accordion is present and elaborate on what you are trying to achieve for my better understanding?

    • Hemant Gaba

      Hey Jorg,

      I guess your question is out of the scope for this guide but we are working this and will get back asap.

      • Molly Tuttle

        I am having the same issue as Jorg. The close icon appears, but does not close the accordian when clicked. By any chance, was this resolved?

    • CodeBoss

      To add funtionality to the button add this Jquery Divi > Theme Options > Integration > Head of blog:


      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’)) {
      $toggle.find(‘.et_pb_toggle_content’).slideToggle(700, function() {

      }, 750);


      Also, you can use below CSS to add the icon to all accordions on your site without having to add a CSS class to each module:


      .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
      display: block!important;
      content: “\e04f” !important;


  4. Maciej


    It seems to work perfectly except one little thing – please notice when the accordion is clicked to unfurl it – there are two (minus) icons (one under the other) instead required just one minus icon. I’ve noticed its some little bug in DIVI.

    • Hemant Gaba

      Hey Maciej,

      Could you please share the URL so that I can investigate the issue?

  5. Dan

    Every question I have you always have an answer for. Thanks for all you do!

  6. Stephanie

    I used the code and the icon is not closing the accordion. Help please!

    • Hemant Gaba

      Hey Stephanie,

      I have checked the code on my end and everything works fine, could you please check once again that you have followed the guide properly?

  7. Mathieu

    I don’t know if this has been added since the tutorial was created but the icon picker for the accordion is in the Content tab under “Toggle Icon”. However, when you select an icon here is overrides the css for displaying the icon when it’s open so you have to add !important content: “\e04f”;

    As always – great tutorial Nelson. Thanks for sharing so freely

  8. Senseitoon

    I used the code and the icon is showing now ! Thank you!
    But when clicking there, it does not close the accordion.

  9. Keith Agnew

    Awesome – thanks! Has there been any update on how to actually get the toggle to close when clicking the close icon? (thanks again, awesome channel).

  10. harman

    If it’s not working use !important after the content

  11. Britt

    For some reason, it’s not working. I have no idea what I’m doing wrong, since I have followed every step. How do I solve this?

    • Hemant Gaba


      Could you please share the URL so that I can investigate the issue?

  12. HyperTodd

    I am having the same issue as many others. The icon now appears but there is no function to close the accordion. I tried the code that CodeBoss posted above, but it still didn’t work.

    • Nelson Lee Miller (aka The Divi Teacher)

      I don’t see anyone else with this “issue” but to clarify as Hemant said, the guide is about to display the icon after the accordion opens, the guide is not about making the icon work in order to close it on click.

      • Monica

        The “issue” is that the Accordion Toggle in Divi does not close even though the mouse turns into a pointer hand when hovering over the open toggle. So, having an icon that signals that it can be closed is of no use unless it actually can be closed by clicking the icon. It seems that Codeboss, who posted here on March 30, has found the same JQuery that I have found in order to make the toggle close on click.

      • Hemant Gaba

        Hi Monica!

        Thank you for sharing the details. We will look further into it and let you know.

  13. Christian M.

    Hi Nelson.
    Thanks for this.
    But i have an issue in my accordion-module.
    When I open the toggle, the icon moves to the right :-/.
    How can I get this also allign to the left?

    • Hemant Gaba

      Hi Christian!

      Try adding the code and see if it helps:

      .pa-add-accordion-icon .et_pb_toggle .et_pb_toggle_title:before{
      left: 0;
      right: auto;

      .pa-add-accordion-icon h5.et_pb_toggle_title{
      padding-left: 30px;


Submit a Comment

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

Recent Posts


Your Cart