Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

36 Comments

Comments By Others

  1. 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?

    Reply
    • 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;
      }

      Reply
  2. 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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
      • Robert

        Silly Me! I didn’t search how to make a FUNCTIONING close icon for the open accordion.

      • Hemant Gaba

        Hi Thomas!

        We’ll add the functionality in the tutorial. For now, please contact Elegant themes support for the customization.

      • Thomas Vaichus

        I am having the same “issue”. Even though the icon now appears in the open state, it is not a functioning icon, which is confusing to users who use the icon to open and expect to use it to close. Can you point us to a solution?

      • Thomas Vaichus

        Hi Nelson,
        High Praise for your tutorials, thank you. On this “issue” it is intuitive to add a close action to this icon. Our users are confused and asking why is there an icon with no functionality. Do you have a solution for this? Thank you.

      • Hemant Gaba

        Hi Monica!

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

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

  3. 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?

    Reply
    • Hemant Gaba

      Britt!

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

      Reply
  4. harman

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

    Reply
  5. 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).

    Reply
  6. Senseitoon

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

    Reply
  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

    Reply
  8. Stephanie

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

    Reply
    • 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?

      Reply
  9. Dan

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

    Reply
  10. Maciej

    Hi,

    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.

    Reply
    • Hemant Gaba

      Hey Maciej,

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

      Reply
    • CodeBoss

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

      ********************************************************************************

      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);
      }
      });
      });

      ********************************************************************************

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

      ********************************************************************************

      Reply
      • SuB HerO

        This one not working for me. Any help?

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

      Reply
      • 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?

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

    Reply
    • 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?

      Reply
  12. Courteney

    Hi!

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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?

      Reply
      • 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.

  13. 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 🙂

    Cheers,
    Neil.

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart