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

8 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

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

      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

Comments By Others

  1. Klaus

    Hello Nelson,

    I have a question about “how-to-increase-the-divi-toggle-and-accordion-modules-clickable-area”. Is it possible that the accordion can only be opened in the area of the icon?

    I am using the accordion on a customer site that is still under construction. The customer complains that the accordion always opens when scrolling on mobile devices, even if you don’t want it to. I have no idea how to prevent this, except to reduce the size of the area where you click. Or is there another solution?

    Greetings Klaus

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

Submit a Comment

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

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0