Accordion: How To Change Icon For Opening Content? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Accordion: How To Change Icon For Opening Content?

PK

Peter Klinke

SP Page Builder 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?

0
9 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #139405

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #136974

Hi Peter,

I would use Custom CSS to override FontAwesome icon.

0
PK
Peter Klinke
Accepted Answer
2 years ago #138573

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?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #138576

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!

0
PK
Peter Klinke
Accepted Answer
2 years ago #138998

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #139065

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

please share URL if it do not work.

0
PK
Peter Klinke
Accepted Answer
2 years ago #139404

Hello Paul,

I have added the code again, url in hidden content. (https://i.imgur.com/v6dWd6m.png)

0
PK
Peter Klinke
Accepted Answer
2 years ago #139413

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!

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #139432

:)

yes, now looks perfecto.

0