Best way to change the arrow icon ?

[spo365]

Hi
What is the best way be can change the arrow from top and down to + and _

{item.Title}

[ejbenke]

This is a great question @spo365 & thank you for your interest in the project!

Changing the arrow to a plus sign when a section is not expanded and a minus when it is, can be done by make a few changes to a CSS file: /src/webparts/reactAccordion/components/reactAccordion.css

The rule sets that we care about for making this change would be these & this is how they are set now in the project:

.accordion__button:before {
   display: inline-block;
   content: "";
   height: 10px;
   width: 10px;
   margin-right: 12px;
   border-bottom: 2px solid currentColor;
   border-right: 2px solid currentColor;
   transform: rotate(-45deg);
}

.accordion__button[aria-expanded=true]:before, .accordion__button[aria-selected=true]:before {
   transform: rotate(45deg);
}

The way the arrow you see is displayed is by showing 2 of the borders of a button with no content. It then gets rotating via transforms based on whether the section is expanded or not.

So to remove the arrow indicator that’s there now, just delete or comment out
The border-bottom:, border-right: and transform: declarations from those rule sets.

And then change the content declaration in .accordion__button:before to content: ‘+’;

To replace the plus sign with a minus sign when the section is expanded you could add content:’-’; to .accordion__button[aria-expanded=true]:before, .accordion__button[aria-selected=true]:before

Here's an example of those changes plus a few other ones that help make it look a little better visually. I haven't fully tested but it should look fairly decent:

.accordion__button:before {
   display: inline-block;
   content: "+";
   font-size: 150%;
   height: 10px;
   width: 10px;
   margin-right: 18px;

.accordion__button[aria-expanded=true]:before, .accordion__button[aria-selected=true]:before {
   content: '-';

That would be a good starting point at least.

[spo365]

@ejbenke

Thanks for your response, i will try this :) .