How to Change the Icon in the Divi Toggle to Animated Arrow

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!

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

18 Comments

  1. Yago Trillo

    Hi Ania, Great tip! Works great. Thanks

    Reply
  2. Gabriela

    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?

    Reply
    • Ania Romańska

      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:

      .my-toggle.et_pb_toggle_open .et_pb_toggle_title:before {color:#000;}
      Reply
      • Gabriela

        Thank you very much! it works!

  3. Joe

    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

    Reply
    • Ania Romańska

      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.

      Reply
      • Yago Trillo

        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.

  4. Ali

    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);
    }

    Reply
  5. Felipe

    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

    Reply
  6. Cristina

    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.

    Reply
    • Ania Romańska

      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.

      Reply
      • Cristina

        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.

  7. David Attard

    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

    Reply
  8. Hel Bee

    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?

    Reply
  9. Ahmed

    Thank You, great tutorials lately!

    Reply
  10. Evi

    Great. Works perfectly! Thanks a lot!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.