By default, the clickable area of the Accordion and Toggle modules is set to be the height of the title. Clicking outside the default clickable area will not open/close the Accordion or Toggle Module.
We can increase the entire Clickable area using custom CSS code.
Increase the Clickable Area for the Accordion Module
Open the Accordion Settings
Go to Advanced Tab > Custom CSS > Toggle and add this CSS rule:
padding: 0;
Go to Advanced Tab > Custom CSS > Toggle Title and add this CSS rule:
padding: 20px 20px 20px 20px!important;
Go to Advanced Tab > Custom CSS > Toggle Icon and add this CSS rule:
padding-right: 20px;
Go to Advanced Tab > Custom CSS > Toggle Content and add this CSS rule:
padding: 0 20px 20px 20px;
Increase the Clickable Area for the Toggle Module
Open the Toggle's Module Settings
Go to Advanced Tab > Custom CSS > Main Element and add this CSS rule:
padding: 0;
Go to Advanced Tab > Custom CSS > Toggle Title and add this CSS rule:
padding: 20px!important;
Go to Advanced Tab > Custom CSS > Toggle Icon and add this CSS rule:
padding-right: 20px;
Go to Advanced Tab > Custom CSS > Toggle Content and add this CSS rule:
padding: 0 20px 20px 20px;
