Add icon to accordion title

[demonboy]

Hi,

As the title suggests I’d like to add an icon to the accordion title (different icon for each title). I came across this thread which is from an old discussion and is a lot of CSS. Is there a simpler way to do this?

It’s a shame there isn’t an icon insertion option in the rich text editor, that would be perfect! If not, does the above-mentioned CSS still stand or can it be done more simply?

Also, I’d like the change the background colour of the header section of the accordion.

Any pointers?

Thanks

[rad]

Hi @demonboy,

Thanks for reaching out.

Unique icons or backgrounds per accordion item is not currently possible. So yes, it would require a custom CSS or icon element just to achieve it. And I don’t recommend customizing it either as some of it will only work on the time is given and may not work in the future. But I’ll give you an idea on how to do it, it’s simply adding this CSS to Accordion’s element CSS

$el .x-acc-item:nth-child(1) button {
  background: #000;
}

The .x-acc-item:nth-child(1) means the first accordion element. Hence, you may repeat that CSS to change each accordion header background.

As for the icons, it’s not possible with CSS anymore. I recommend adding your icon through the title directly (http://demo.theme.co/integrity-1/shortcodes/icons/). Example,

And since you no longer need the default icon indicator (the one beside the trophy icon from above screenshot), then you can completely turn it off.

Thanks!

[demonboy]

Man, that is too cool! And that’s certainly a lot less CSS from my point of view. You pulled it out the bag again, @Rad. Thank you once again.

[christian]

You’re welcome, @demonboy. Glad we’re able to help.