How To Change The Icons In The Divi Accordion Module

I’m going to share with you my CSS code on how to modify or replace Divi’s Accordion Module.

‍

Most of us might have noticed that the accordion module doesn’t have an icon on the active tab.

And it would be more user-friendly if you had an arrow icon pointing down when collapsed and an arrow up icon when expanded.

‍

You must first add an accordion menu, after which you can style it however you want. Because this quick tutorial is more about adding CSS to Divi’s custom CSS box, I will leave my design as is.

‍

Navigate to the advanced tab and open CSS ID & Classes. Add “custom_css_arrow” to the CSS Class field.

‍

Click Save and exit the Visual Builder. Next, on your wordpress dashboard, navigate to the Divi section, then scroll down to the Custom CSS box and paste the CSS code found in the description below.

Save your code by clicking “Save Changes.” Then test your accordion menu.

‍

.custom_css_arrow .et_pb_toggle_title:before {
    content: "\33" !important;
}
.custom_css_arrow .et_pb_toggle_open .et_pb_toggle_title:before {
    display: block;
}
.custom_css_arrow .et_pb_toggle_open .et_pb_toggle_title:before {
    content: "\33" !important;
    transform: rotate(180deg);
}