How To Add A Second Line Of Subtitle Text To Divi Toggle And Accordion Modules Tutorials By Pee Aye Creative

How To Add A Second Line Of Subtitle Text To Divi Toggle And Accordion Modules

In this tutorial I will show you how to add a second line of subtitle text to Divi Toggle and Accordion modules.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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 custom CSS class for adding a second line subitle text to the Divi 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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.

add custom CSS class for adding a second line subitle text to the Divi Accordion module

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.

9

Last updated Mar 1, 2022 @ 12:07 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. James Hayward

    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.

    Reply
  2. Russ Adams

    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 “}:

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart