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

Search
1

Hi all,

Are we able to change the standard carat icon on the FAQ cards to be the +/- when the card is collapsed/expanded? Are there built in assets that we can leverage for this or do we need to use new SVGs to replace the carat icon?

image
image1527Ă—503 101 KB

Thanks!

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
3

Worked perfectly, thanks so much!

4

Hi Rachel,

Great! Glad you had success. One callout to note is when taking a look on mobile, I noticed that the icons may be variable in size. If you’re seeing this as well, simply target the icon image and add the following CSS:

max-width: unset;

Let us know if you have any questions.

Best,
Alyssa

5

Hi Alyssa,

Good catch - I’m also noticing that the icons are variable in size on mobile. I tried adding that CSS to .HitchhikerFaqAccordion-icon in the answers.scss file, but it doesn’t seem to be working. I tried adding it in a few different places (expanded, parent, etc.) but no luck. Any idea what I’m doing wrong/how I can fix it?

image

Thanks!
Rachael

6

Hi Rachel,

You’ll want to target the image directly rather than the icon class. You can try:

.Icon img {
max-width: unset;
}

Best,
Alyssa