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