Normally Divi will always keep one accordion tab open, and the only way to close a tab is to open another. If you'd like your users to be able to close accordion tabs without needing to open another (i.e. so that all tabs are closed), here's how to do it.
Example of a Closable Accordion
The following example shows the feature in action. Click to open the accordion tabs and you'll then be able to close them again by clicking either on the toggle "close" icon, or on the toggle title itself.
How hot is the sun?
Is the moon really made of cheese?
Do you want closable Divi accordion toggles?
Method #1: Using Divi Booster
This feature is included in Divi Booster. My Divi Booster plugin is the easiest way to customize Divi, allowing you to make hundreds of useful modifications to Divi with just a few clicks - no code needed!
You'll find it at:
- Divi Booster 2.9.5 upwards: "Accordion Module Settings > Design > Toggle > Closeable"
- Divi Booster 2.8.4 – 2.9.4: "Accordion Module Settings > Design > Title Text > Closeable"
It is also possible to make all accordions on the site closeable using the option found under "Modules > Accordion" on the Divi Booster settings page. This older option has been available since Divi Booster v1.9.9.
Method #2: Manually adding jQuery / CSS to Divi
If you don't have Divi Booster and are comfortable with adding jQuery / CSS code to Divi, you can make the accordions closable using the following method.
Step 1: Add the following jQuery code to your site, e.g. by pasting it into the "Divi > Theme Options > Integration > Add this code to the head of you blog" box.
Step 2 (Optional): To add a "close" icon to the open toggles, add the following CSS code to your site, e.g. by pasting it into the "Divi > Theme Options > General > Custom CSS" box.
Related Post: Adding CSS to the Divi Theme
Adding a Second Close Icon at the Bottom of Toggles
If your accordion toggles contain a lot of text, you may want to add a second close icon at the bottom to save your users having to scroll all the way back to the top of the text to close the toggle. Here's the code to do this. It should be used in addition to either the Divi Booster / manual methods given above. The code can be placed either in a code module on the page in question, or in the "Divi > Theme Options > Integrations > Add Code to the Head of your Blog" box.