How To Style Part of a Divi Accordion Title

How To Style Part of a Divi Accordion Title

If you’ve ever wanted to style part of your accordion, you will have come across a stumbling block because Divi doesn’t allow HTML to be added to these titles so only the whole title can be styled.
This tutorial will overcome this problem with a few lines of jQuery and CSS. If you don’t know where to put the code check out this tutorial.

This accordion title will remain the same.

This is inside the number 1 accordion

Part of this title will be styled using jQuery and CSS.

This is inside the number 2 accordion

With this method we are completely changing the HTML of the title with the use of jQuery. Firstly, we are targeting the second accordion with .et_pb_accordion_item:nth-child(2). We then wrap the part of the title we want to style in span tags and give it a class of ‘sn-accordion-change’.

jQuery( document ).ready(function($) {

$(".et_pb_accordion_item:nth-child(2) .et_pb_toggle_title").html("This is the <span class='sn-accordion-change'>new accordion</span> title");

});

We can then go on to the styling.


.sn-accordion-change {
 color: blue;
 font-weight: bold;
 font-style: italic;
}

That’s all folks. Job done!

This accordion title will remain the same.

This is inside the number 1 accordion

Part of this title will be styled using jQuery and CSS.

This is inside the number 2 accordion

Disclaimer - Divi is a registered trademark of Elegant Themes, Inc. This website isn't affiliated with or endorsed by Elegant Themes.
To enable us to keep some of the content on this site free, we might receive an affiliate commission if you click through and purchase products we advertise/recommend. You will never be charged more for this.