Change accordion icon on expand

Hi,

Is there any way to change accordion icon on expand.

So once the accordion item is expanded, instead of showing up arrow I want to show cross icon.

Hello.

Just like on the post linked on Bedjith's answer, you can change your page's CSS, and with some experiments I ended up with some CSS that might be what you are looking for.
Try to add this CSS to your page and tell us if it works for you:

.accordion-item.is--open .fa.fa-angle-down:before{
       content: "\f00d";
}

If you want different icons you need to change "\f00d" to the one that you want.

Regards

Hi Tiago,

Thank you very much for this direct and detailed answer!


mvp_badge
MVP

Hi Vrushali,

For the stated requirment, you can refer to the below-mentioned forum post which covers the same use-case.

Forum Post: new-icon-for-expand-collapse


Hope this helps you!


Kind regards,

Benjith Sam


Hi Benjith,

Thank you for the link. It has really helped me.

mvp_badge
MVP

You're welcome, Vrushali.

Glad to help you :)


Kind regards,

Benjith Sam

Hello.

Just like on the post linked on Bedjith's answer, you can change your page's CSS, and with some experiments I ended up with some CSS that might be what you are looking for.
Try to add this CSS to your page and tell us if it works for you:

.accordion-item.is--open .fa.fa-angle-down:before{
       content: "\f00d";
}

If you want different icons you need to change "\f00d" to the one that you want.

Regards

Hi Tiago,

Thank you very much for this direct and detailed answer!


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.