Accordion: How to change icon for opening content? - Forum | JoomShaper
Solved SP Page Builder

Accordion: How to change icon for opening content?

Asked by Peter Klinke 2 years ago Last activity 2 years ago

How do I change the icon for opening and close the content in pagebuilder 3?
I would like to have a '+' for open and a '-' for close, is that possible?

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
2 years ago

Peter, are you sure that you paste that line from my shared CSS?

.sppb-panel-heading.active .sppb-toggle-direction {
  -webkit-transform: none;
  transform: none; top: 20%;}

I don't see it.

8 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
2 years ago

Hi Peter,

I would use Custom CSS to override FontAwesome icon.

Peter Klinke Asked this
2 years ago

I found the icon for open the accordion in css, but not the icon for close again (the opened accordion item)

Do you have a tip for me?

Paul Frankowski Senior Staff
2 years ago · edited

TRY THAT:

.sppb-panel-faq  .fa-chevron-right::before {content: "\f067";}
.sppb-panel-faq  .active .fa.fa-chevron-right::before {content: "\f068";}
.sppb-panel-faq  .sppb-panel-heading.active .sppb-toggle-direction 
{-webkit-transform: none;  transform: none; top: 20%;}

use it in template Custom CSS, more in helix guide!

Peter Klinke Asked this
2 years ago

Hi Paul,

It almost fits, the icon for openaccordion item is rotated 90°
![](It almost fits, the icon for open is rotated 90°)

It seems to be rotated by code.

Paul Frankowski Senior Staff
2 years ago · edited

WIth "^" it had sense, that's why I also used transform: none in shared code.

please share URL if it do not work.

Peter Klinke Asked this
2 years ago

Paul,
I now have added the last code above and it looks fine!

.sppb-panel-faq .fa-chevron-right::before {content: "\f067";}
.sppb-panel-faq .active .fa.fa-chevron-right::before {content: "\f068";}
.sppb-panel-faq .sppb-panel-heading. Active .sppb-toggle-direction
{-webkit-transform: none; transform: none; top: 20%;}
.sppb-panel-heading.active .sppb-toggle-direction {
-webkit-transform: none;
transform: none; top: 20%;}

Thank you very much!

Paul Frankowski Senior Staff
2 years ago

:)

yes, now looks perfecto.

Log in to reply.