Adding a different image for each accordion title

Glad you like the plugin.

Yes, you would need to assign a unique ID to each accordion and then target that id in your themes CSS stylesheet. You can use the CSS :before or :after pseudo-element in your theme’s stylesheet to add the custom icons. Something like this should work:

/* Set up the default styles for all titles */
.accordion-title {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
}

/* Repeat this block for each title/icon */
#accordion-one-id:before {
    background-image: url("path/to/icon.png");
}

Then just replace the accordion-one-id part with your custom ID and repeat that block for each icon.

Thanks for the awesome plugin. Very nice.

I’m having trouble getting the background image to display as per the above instructions. the title is displaying in the accordion, but the image is not. Thoughts?

Here’s my code:

[accordion id=”cnn”][accordion-item title=”CNN”]This is the content for the link.[/accordion-item][/accordion]

and here’s my css:

.accordion-title {
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}

#cnn:before {
background-image: url(“https://www.test.test.com/wp-content/uploads/2015/05/AtlanticSmall.png”);
}

Any idea why it’s not displaying?

Try removing the :before part. Otherwise you might have to add a width and height to the before part CSS.

Thanks. That worked perfectly. Unfortunately, after seeing the result, it’s probably not the look I’m going for. Thanks so much for your quick and totally brilliant solution!

Thanks for this great plugin.

How can I put an image just before an accordion title which will be working as same as the Title. That means if I click on the image and/or the title it opens the accordion content?

Please let me know if it is possible.

Thanks and Regards,
Deba