Add Subtitles To Toggles!
If you want someone to take action, we use a call-to-action. Usually this includes a title and subtitle, but in the Divi Toggle and Accordion modules, there is no way to add a subtitle. Adding a second line of text is a great way to encourage users to open the toggle, and also generally helpful to provide additional context or information about the content of the toggle. So in this tutorial, I will show you how to add a second line of subtitle text to the Divi Toggle and Accordion modules.
▶️ Please watch the video above to get all the exciting details! 👆
Add A Custom CSS Class To The Toggle Modules
Let’s start with the Toggle module and do the Accordion module separately, since that will be a little different. The first step is to add a custom CSS class to the specific Toggle module that you want to target. We do this so that the snippet does not affect all the other Toggle modules on your site, which allows us to choose which ones remain normal and which ones are affected by the code and receive the specific subtitle text.
Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-second-line-1” in the CSS Class input field of the Toggle module.
Add The CSS Snippet To Your Toggle Modules
Now that the CSS class is added to the Toggle module, you can go ahead and copy and paste the CSS snippet below into your site. As soon as you do this, the module will show a second line of subtitle text, which is written and can be customized in the snippet.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste 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.
.pa-toggle-second-line-1 .et_pb_toggle_title:after {
content: "Toggle Item 1 Second Line Subheading Text Here";
display: block;
font-size: 16px;
line-height: 1.7em;
}
Customize The Text
So obviously the most important part here is the actual text. You can see we are adding this in a pseudo class. The content text is meant to be changed.
Styling
The most important part of the rest of the code is the display: block; which makes sure the text is on its own line, so please do not remove that. But other than that, you can adjust the style however you want. That includes things like font size, font weight, and color.
Duplicate The Process Per Toggle
If you want to have the same text on all the toggles, you could of course use the same CSS class and snippet for each Toggle. But most likely you would want to have a different subtitle text for each Toggle. To do that, you can simply change the number 1 in the class and also in the snippet as many times as you need.
Add A Custom CSS Class To The Accordion Modules
The process is going to be pretty much the same for the Accordion module as the Toggle, but with one key difference. The Toggle module is an individual item, but the Accordion contains multiple toggles. And the problem here is that the Accordion does not have a CSS class input field for each individual toggle item. Because of this, we need to target the individual toggles within the Accordion using the Divi Builder numeric suffixes.
Start by adding a custom CSS class to the specific Accordion module that you want to target. We do this so that the snippet does not affect all the other Accordion modules on your site, which allows us to choose which ones remain normal and which ones are affected by the code and receive the specific subtitle text.
Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-accordion-second-line-1” in the CSS Class input field of the Accordion module.
2. Add The CSS Snippet To Your accordion Modules
Now that the CSS class is added to the Accordion module, you can go ahead and copy and paste the CSS snippet below into your site. As soon as you do this, the module will show a second line of subtitle text, which is written and can be customized in the snippet.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste 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.
.pa-accordion-second-line-1 .et_pb_accordion_item_0 .et_pb_toggle_title:after {
content: "Accordion Item 1 Second Line Subheading Text Here";
display: block;
font-size: 16px;
line-height: 1.7em;
}
.pa-accordion-second-line-1 .et_pb_accordion_item_1 .et_pb_toggle_title:after {
content: "Accordion Item 2 Second Line Subheading Text Here";
display: block;
font-size: 16px;
line-height: 1.7em;
}
.pa-accordion-second-line-1 .et_pb_accordion_item_2 .et_pb_toggle_title:after {
content: "Accordion Item 2 Second Line Subheading Text Here";
display: block;
font-size: 16px;
line-height: 1.7em;
}
Customize The Text
Notice we have different text for each of the three items. The content text is added as a pseudo class and is meant to be changed.
Styling
The most important part of the rest of the code is the display: block; which makes sure the text is on its own line, so please do not remove that. But other than that, you can adjust the style however you want. That includes things like font size, font weight, and color.
Duplicate The Process Per Accordion
To duplicate the process, start by using a different CSS class for each Accordion module. So you can simply change the number 1 in the main class and also in the snippet as many times as you need.
Add More Individual Items
This is the part that is different from the Toggle module. Like I said before, the only way to target each individual item is to use the suffix system. So take special notice to the suffix in our examples, and use that same pattern. Keep in mind they start with _0 and count up on the same page.
You bloody legend! Nelson, I have been trying to work this out for a while for a client site. Where we had a category attached to each toggle. This little hack has worked a treat. Now my next challenge is to make the content and images inside the toggle look better. Thank you.
You’re welcome James!
When I input the copied Custom CSS line, Nelson, I get the following error message. Is this due to a change in CSS or Divi?
.pa-toggle-second-line-1 .et_pb_toggle_title:after {
Expected RBRACE.
content: “Toggle Item 1 Second Line Subheading Text Here”;
display: block;
font-size: 16px;
line-height: 1.7em;
}
Any thoughts you have would be appreciated. If I could make this work as well as your demo does, it would interest me in your many other products!
Thanks for any thoughts you may have.
Unexpected token “}:
That means you are placing the code in the module, so please add in Theme Options. You can check the tutorial for instructions.