How To Move The Divi Toggle And Accordion Icon To The Left Tutorial By Pee Aye Creative

How To Move The Divi Toggle And Accordion Icon To The Left

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to move the Divi Toggle and Accordion module open and close icons to the left side.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Modules

The first step is to add a custom CSS class to the specific Toggle or Accordion module that you want to target. We do this so that the snippet does not affect all the other Toggle or Accordion modules on your site, which allows us to choose which ones remain normal and which ones are affected by the code.

Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-icon-left” in the CSS Class input field of the Toggle module, or “pa-accordion-icon-left” in the CSS Class input field of the Accordion module.

move the Divi Toggle module icon to the left
move the Divi Accordion module icon to the left

2. Add The CSS Snippet To Your Site

The rest of the tutorial is just as simple. Now that the classes are adding, you can go ahead and copy and paste the CSS into your site. As soon as you do this, the icon in the Divi Toggle module or Divi Accordion module will move to the left.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

Toggle Module

/*move the toggle icon to the left*/

.pa-toggle-icon-left .et_pb_toggle_title:before {
	left: 0 !important;

/*adjust spacing on the left for the icon*/

.pa-toggle-icon-left .et_pb_toggle_title,
.pa-toggle-icon-left .et_pb_toggle_content {
	padding-left: 2em !important

Accordion Module

/*move the accordion icon to the left*/

.pa-accordion-icon-left .et_pb_toggle_title:before {
	left: 0 !important;

/*adjust spacing on the left for the icon*/

.pa-accordion-icon-left .et_pb_toggle_title,
.pa-accordion-icon-left .et_pb_toggle_content {
	padding-left: 2em !important

Move The Icon Position

The first part of the code in each snippet is adding the left position value of 0 which is making the icon align to the left side of the title text.

Add The Spacing

The second part of each of the snippets is simply creating the necessary space for the icon. We are moving the title text and also the content text over to the right a little. We used 2em as the value because we thought it looked proportionally the same to how it normally is by default on the right side.

Optional: Align Content To Left

You can change both values as per your personal preference. In fact, you could remove the code that moves the content over (.pa-toggle-icon-left .et_pb_toggle_content and .pa-accordion-icon-left .et_pb_toggle_content) if you want. I just chose to move the title and content, but it would look good with just the title moving over also.

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Simon

    Hi, when I open the toggle, the icon moves to the right. How can I get this also allign to the left?

    • Hemant Gaba

      Hey Simon,

      I have checked the website and I think that the problem is solved now. Please let me know if you need any further assistance.

      • Deb Nigra


        Thank you for this post. I have been searching for a way to move the icon to the left.

        However, the close icon is displayed on the right. Is there a way to fix that?

  2. Anita

    Hi, is there a way to make the icon centred? I want to use the toggle feature without title text. I used the code above and it is NEARLY centred without a title but slightly off.

    Thanks for the help!

    • Hemant Gaba

      Hey Anita,

      I have checked the website and the icons are already centered.

  3. Jake

    This is great – however, I am having weird alignment issues. I have played with the numbers and always the title is a little further to the left than the body text. Do you have any suggestions for how to align the title and the body text while keeping the icon where it is? Thank you!

  4. Mirko

    Thank you Nelson.
    This is something Elegant Themes should have fixed long ago.
    Thanks again for your help.

  5. Melissa


    I’m trying to combine this with the tweak to make it so you can click to close the open accordion. I tried on my own and it didn’t work – any suggestions?

    • Hemant Gaba

      Hi Melissa!

      Can you please share the URL of the page so that I can check further?

  6. Deb Nigra

    Please ignore my previous comment. I think it was just a caching issue and I was impatient.

    Thank you again for all the helpful and easy to understand posts.


  7. Chistian

    Hi Nelson.
    Thanks for this.
    But i have an issue in my accordion-module.
    When I open the toggle, the icon moves to the right. How can I get this also allign to the left?


Submit a Comment

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

Recent Posts


Your Cart