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

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!

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

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.
11

Last updated Feb 18, 2022 @ 3:46 pm

Subscribe

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 :)

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

6 Comments

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

      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
  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!

    Reply
    • Hemant Gaba

      Hey Anita,

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

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart