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

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!