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.

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("Part of <span class = 'sn-accordion-change'>this title will be styled</span> using jQuery and CSS.");
});

NOTE: nth-child(2) will need changing to reflect which title in the accordion you want to partially change.

e.g If you have an accordion with 6 items and you wanted to change the 4th item, the jQuery would be:
".et_pb_accordion_item:nth-child(4) .et_pb_toggle_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!