How To Increase The Divi Toggle And Accordion Module Clickable Area Tutorial by Pee Aye Creative

How To Increase The Divi Toggle And Accordion Modules Clickable Area

In this tutorial I will show you how to increase the clickable area of the Divi Toggle and Accordion modules beyond just the title text.
Categories: Tutorials

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-clickable-area” in the CSS Class input field of the Toggle module, or “pa-accordion-clickable-area” in the CSS Class input field of the Accordion module.

increase the clickable area of the Divi Toggle module
increase the clickable area of the Divi Accordion module

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 modules will visually still look exactly the same, but when you hover over them, you will be much happier to have a larger area to click on to open and close the modules.

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

/*remove the default padding from the toggle*/

.pa-toggle-clickable-area.et_pb_toggle {
	padding: 0;
}


/*add the padding back to the title instead*/

.pa-toggle-clickable-area.et_pb_toggle .et_pb_toggle_title {
	padding: 20px;
}


/*adjust padding for the icon to restore orginal position*/

.pa-toggle-clickable-area.et_pb_toggle .et_pb_toggle_title:before {
	padding-right: 20px;
}


/*add the padding back to the open toggle content*/

.pa-toggle-clickable-area.et_pb_toggle .et_pb_toggle_content {
	padding: 0 20px 20px 20px;
}

Accordion Module

/*remove the default padding from the accordion*/

.pa-accordion-clickable-area .et_pb_toggle {
	padding: 0;
}


/*add the padding back to the title instead*/

.pa-accordion-clickable-area .et_pb_toggle .et_pb_toggle_title {
	padding: 20px;
}


/*adjust padding for the icon to restore orginal position*/

.pa-accordion-clickable-area .et_pb_toggle .et_pb_toggle_title:before {
	padding-right: 20px;
}


/*add the padding back to the open accordion content*/

.pa-accordion-clickable-area .et_pb_toggle .et_pb_toggle_content {
	padding: 0 20px 20px 20px;
}

Remove  The  Default Padding

The first part of the code in each snippet is removing the default padding around the title area. This area is wasted as it was added in a poor way. It should have been added to the content instead.

Add Padding Back To the title

The second part of each of the snippets is simply adding the padding back that was just removed. The padding is now on the proper element, which means the surrounding area will now be part of the clickable element. Brilliant huh.

Adjust Icon Padding/Position

This third part of the snippets adjusts for the spacing issue to the right of the icon which was created when we removed the default padding.

Add Padding Back To Open Item

The only way to do this was to remove the padding from the module in the first snippet, so now we are continuing to add it back to the proper locations. This simply adds the padding back to the open content exactly how it looked before.

15

Last updated Feb 18, 2022 @ 5:05 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

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart