Should you focus on the details?
I strongly believe details are what separates an amateur from a professional. It is about the dedication to take the extra time to adjust and tweak your designs to make everything pixel-perfect. But you should be careful not to focus on details that are not important. There is a thin line here I’m afraid. As a chronic perfectionist, I often need to remind myself that “finished is better than perfect”. But let me assure you, that you can’t go wrong with this little CSS snippet I share below!
ETmodules – Divi Icon Font
Divi Toggles and Accordions use the ETmodules icon font. This is a free font made by Elegant Themes, and you can see the list of all available icons inside this blog post. I recommend keeping this link in your bookmarks, you can use these icons in many different places, not just the Blurbs and Buttons!
CSS to change the Toggle and Accordion Icon
Toc change the icons in Toggles to animated triangles, simply add this bit of CSS to your website (your child theme stylesheet or Theme Options Custom CSS will do):
.et_pb_toggle_title:before {
content: "\33";
transition: all .3s ease-in-out;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
content: "\33";
transform: rotate(180deg);
}To use a different icon, choose it from the ET list and remember to replace first three symbols of your icon code with backslash and then change the content property value.
The code above will work globally, on all Toggle and Accordion modules across your website. If you’d like to be more specific and change the icon for a single Toggle module, simply add a custom CSS class to the module settings (eg. my-icon) and replace the CSS with this:
.my-icon .et_pb_toggle_title:before {
content: "\33";
transition: all .3s ease-in-out;
}
.my-icon .et_pb_toggle_open .et_pb_toggle_title:before {
content: "\33";
transform: rotate(180deg);
}Save time with Divi Toolbox!
If you are using our awesome Divi Toolbox plugin, you don’t need to worry about CSS – you can enable animated Toggle icons with a single click in the plugin dashboard!
Hi Ania, Great tip! Works great. Thanks
Hi Ania! Can I set a different icon color for to up the toogle? how can I do it? You have the color always in black, but if my closed toogle background have a strong color, the icon is white, but when it have to close, the white color don’t show over white background. I hope you can understand. I would like to hace different icon color when this is closed then this is open. Can you help me?
Hi Gabriela! Try adding a CSS class to the Toggle module (eg. my-toggle) and this bit of CSS to the Theme Options or page settings:
Thank you very much! it works!
Hi Ania,
how to close the first element of theivi accordion if there is only one element because the closing icon does not appear
Thanks in advance
Joe
I’m afraid it is not possible to close the accordion module. If you want to be able to close it – use the Toggle module instead.
Hi, you could try to duplicate your accordion item (so you have 2) and the on the first one, go to the css-main item-and add:
display: none;
Now the first one is hidden and the second one is showing, and closed.
Hi ANIA ROMAŃSKA,
I have applied the following code in my style sheet but it doesn’t reflect on the accordion. Can you please help me out?
.et_pb_toggle_title:before {
content: “\33”;
transition: all .3s ease-in-out;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
content: “\33”;
transform: rotate(180deg);
}
Hello this is excelent!! How i can center de icon in the middle? because i have titles with 3, 2 and 1 line so i have differents positions for each one.
thankS1
Dear Ania, I am using the DIVI Tool Box, but I would like to have a “+” and “-” as icon, and I would like to have the icons on the left.
How can I do this, when I am useing the DIVI Tool Box?
Thanks.
Hi Cristina, I’m afraid there is no option to do this using the Tooblox settings, you’d need to use custom CSS to achieve this.
Ok… I have tried it, but its until not good. I have put this Code in CSS:
.et_pb_toggle .et_pb_toggle_title {
cursor: pointer;
position: relative;
padding: 0 0px 0 0;
right: 0px;
}
.et_pb_toggle_title:before {
content: “\4c”;
font-size: 30px;
position: relative;
transition: all .3s ease-in-out;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
content: “\4b”;
font-size: 30px;
position: relative;
transform: rotate(180deg);
}
But the icon “Jump”… Can you help me, what should I put here?
Thanks.
Hey Ania, that’s a neat trick!
You’ve got quite a nice collection of articles here. As Divi lovers ourselves too, we’re thrilled when we find people who are as passionate as us about Divi 🙂
David
Hi, thank you works well. Any tips on how to change the open header background so the content is on a white background but the header remains the colour it had when closed?
Thank You, great tutorials lately!
Great. Works perfectly! Thanks a lot!
I love this Stuff!
Great, Thanks a lot .