Customizing and animating the Divi toggle icon takes just a few lines of custom CSS in your ePanel or Divi Child Theme and you will get a really cool effect as you may have seen in some sites, such as Brewlife.

This example changes the colour of the icon when it is open along with rotating the down arrow 180 degrees to become an up arrow. Use the following code in your ePanel or custom CSS;

/*  Divi toggle animate arrow and change colour */
.et_pb_toggle_open .et_pb_toggle_title:before {
transform: rotate(180deg);
content: "\25bc";
transition:all 0.5s ease-in-out 0s;
color:#e5e2d3;
}
.et_pb_toggle_title:before {
content: "\25bc";
font-size:2em;
transition:all 0.5s ease-in-out 0s;
color:#179baf;
}

Comments

comments

Pin It on Pinterest