Adding an image to Accordion title/bar

[INcroatia]

Hi there X,

We’d like to add an image into the accordion title. Is it possible to do this without a class and have the whole accordion built with shortcodes?

We don’t have a link to show for now but we’re creating an event with ME Calendar and we’ll have our schedule in Pro page builder. We’d like to have an image of the lecturer in the accordion title (hence lots of different pictures).

Some samples of what we’d like to achieve:

thanks for your help!

[ruenel]

Hello There,

Thanks for writing in! By default, the accordion element titles will only accept plain text. You cannot easily insert an image into it. You will need to to add a custom class for each accordion item and use a custom css to display an image. You can make use of this as an example:

.class-name .x-accordion-toggle:after {
    content: "";
    display: inline-block;
    float: right;
    background: url('http://placehold.it/40x40/ff0e0e') center center no-repeat;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

Please do not forget to change the class-name.

Hope this helps. Please let us know how it goes.