A Nice Simple Un-Divi Change
By default, the Divi Toggle module and Divi Accordion module have an icon on the right side. But there are no settings to move it to the left! So as always, we come to the rescue with a CSS snippet. This very easy tutorial will show you how to move the icon in the Divi Toggle and Accordion modules to the left side. It’s a simple change, but also a very nice change to help “un-Divi” your site! Try it out, and be sure to watch the video to see it all in action.
▶️ 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.
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.
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?
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
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?
Hi Melissa!
Can you please share the URL of the page so that I can check further?
Thank you Nelson.
This is something Elegant Themes should have fixed long ago.
Thanks again for your help.
You’re welcome!
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!
You should be able to work it out with the values. Try different units maybe?
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!
Hey Anita,
I have checked the website and the icons are already centered.
Hi, when I open the toggle, the icon moves to the right. How can I get this also allign to the left?
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.
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?
Great addition, Nelson!
Thanks Phil! Glad you like it.