Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Increase The Divi Toggle And Accordion Modules Clickable Area

Nelson Miller Profile Orange
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.

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

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

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

Where To Paste The CSS Code

If you are using Divi Assistant, simply paste the code below into the CSS tab of the code editor window (be sure to enable it in the Code Helper settings).

If you are using a child theme such as our free Divi child theme, place this snippet into the style.css file.

Otherwise, you can place 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

/*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.

Categories: Tutorials

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

    • Hemant Gaba

      Hi Marcos!

      I’m afraid, it requires a lit bit of customization. We don’t offer free customization, we would only respond to questions related to the tutorial. However, I advise getting in touch with the Divi support staff. They’ll assist you in resolving the problem.

      Reply
  1. gregT

    Who knew? 🙂 I had a client reaching out saying that the “buttons didn’t work now and then…” As it turns out they meant the Toggles and Accordions as they were clicking just outside the text area at times.

    This solved the issue amazingly. Thank you!

    Reply
  2. Jean

    Hello,
    Thank you for this tutorial
    For info, after applying this CSS, some title text can overlap the accordion icon
    I solved it with:
    .accordeon1 .et_pb_toggle .et_pb_toggle_title {
    padding: 20px 40px 20px 20px;
    }

    Reply
    • Hemant Gaba

      Thanks for sharing the code!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart