Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. 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?

    Reply
  2. 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.

    Deb

    Reply
  3. Melissa

    Howdy!

    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?

    Reply
  4. Mirko

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

    Reply
  5. 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!

    Reply
  6. 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!

    Reply
  7. Simon

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

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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.

      Reply
      • Deb Nigra

        Hello,

        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?

Submit a Comment

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

Recent Posts

0

Your Cart