Can we change the standard carat icon on FAQ cards to +/- icons?

Search
2

Hi Rachael,

Welcome to the Community and great question! Yes, we can toggle the FAQ accordion icon based on whether the card is expanded or collapsed. Essentially we have to define two images on top of each other, and then toggle which image displays. The standard Answers icon library (found here) does not include +/- icons so you will need to provide your own.

1. Define both images: Fork the faq-accordion card and modify the template.hbs file to include two icons (rather than one) using “iconUrl” (rather than “iconName”) within a new parent class (This builds off of this Community post on how to add a custom icon to FAQ accordion cards). This will look something like:

<div class="HitchhikerFaqAccordion-icon-parent">
  <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon"
    data-component="IconComponent"
    data-opts='{"iconUrl": "static/assets/images/plus.png"}'
    data-prop="icon">
  </div>
  <div class="HitchhikerFaqAccordion-icon--expanded"
    data-component="IconComponent"
    data-opts='{"iconUrl": "static/assets/images/minus.png"}'
    data-prop="icon">
  </div>
</div>

2. Toggle which image displays: Change the opacity of each icon to set whether it is visible (1) or transparent (0) based on whether the FAQ is collapsed. The aria-expanded attribute tied to the HitchhikerFaqAccordion-toggle div indicates when the FAQ is collapsed. Add this code to the answers.scss file:

  // expanded = true, show minus icon
  .HitchhikerFaqAccordion-toggle[aria-expanded="true"] .HitchhikerFaqAccordion-icon {
    opacity: 0;
  }

  .HitchhikerFaqAccordion-toggle[aria-expanded="true"] .HitchhikerFaqAccordion-icon--expanded {
    opacity: 1;
  }

  // expanded = false, show plus icon
  .HitchhikerFaqAccordion-toggle[aria-expanded="false"] .HitchhikerFaqAccordion-icon {
    opacity: 1;
  }

  .HitchhikerFaqAccordion-toggle[aria-expanded="false"] .HitchhikerFaqAccordion-icon--expanded {
    opacity: 0;
  }

3. Place two images on top of each other: Add this to the answers.scss file:

  .HitchhikerFaqAccordion-icon-parent {
    position: relative;
  }
  
  .HitchhikerFaqAccordion-icon {
    position: relative;
    margin: 0;
  }

  .HitchhikerFaqAccordion-icon--expanded {
    position: absolute;
    top: 0;
    left: 0;
  }

Here is what the end result will look like:
Search (1)

As always, make sure to QA across browsers and devices before pushing live!

1 Like