A Quick Fix For Missing Icons
The Divi Toggle and Divi Accordion modules were historically missing an icon picker, and only showed an icon when the toggle was closed. It was always missing when open. So I was excited to see Elegant Themes add the icon pickers to the Toggle module for the Open Icon and Closed Icon, and to the Accordion module for the Closed icon. But we are still missing the Open Icon in the Accordion module. So in this tutorial, I will give you a quick CSS snippet and show you how to add the missing icon to the opened Accordion item.
▶️ 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.
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.
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.
Great, glad you like it! I’m really pleased that the tutorials are valuable! 🙂
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!
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?
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.
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.
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
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?
Hi Nelson,
thank you for your great help here!
I added also the code but the button does not give the action to close.
Can you help or is this a divi Issue?
KInd regards
Joerg
The URL is: https://mls-rimbach.de/unsere-schule/#personen
Hey Jorg,
I guess your question is out of the scope for this guide but we are working this and will get back asap.
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?
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;
}
********************************************************************************
This one not working for me. Any help?
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.
Hey Maciej,
Could you please share the URL so that I can investigate the issue?
Every question I have you always have an answer for. Thanks for all you do!
You’re very welcome, Dan! So glad we have the solutions you are looking for!
I used the code and the icon is not closing the accordion. Help please!
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?
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
This tutorial is specifically about the “opened” toggle though.
I used the code and the icon is showing now ! Thank you!
But when clicking there, it does not close the accordion.
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).
If it’s not working use !important after the content
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?
Britt!
Could you please share the URL so that I can investigate the issue?
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.
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.
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.
Hi Monica!
Thank you for sharing the details. We will look further into it and let you know.
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.
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?
Hi Thomas!
We’ll add the functionality in the tutorial. For now, please contact Elegant themes support for the customization.
Silly Me! I didn’t search how to make a FUNCTIONING close icon for the open accordion.
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?
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;
}