343
Views
6
Comments
Solved
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.

2018-10-04 11-09-42
Tiago Oliveira
Solution

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

UserImage.jpg
Vrushali Punekar

Hi Tiago,

Thank you very much for this direct and detailed answer!


2021-03-18 21-03-15
Benjith Sam
 
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


UserImage.jpg
Vrushali Punekar

Hi Benjith,

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

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Vrushali.

Glad to help you :)


Kind regards,

Benjith Sam

2018-10-04 11-09-42
Tiago Oliveira
Solution

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

UserImage.jpg
Vrushali Punekar

Hi Tiago,

Thank you very much for this direct and detailed answer!


UserImage.jpg
Dhiya S

how to expand the accordion need to close again , but already opened the page 


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