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("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!