How to modify arrows in bootstrap accordion?

Question

I wrote some JavaScript and tried to replace the class whenever the aria-expanded element is true or false but nothing seems to be happening The first card is open when the page loads because the aria-expanded ="true". I want to find a way to replace the class in whenever the value of the aria-expanded element is changed. I'm new to jQuery and webdev so all of your help is appreciated. Edit-I used bootstrap accordion to make sure only one can be open at a time

<div id="headingOne">
    <h5 class="card-title">
        Or Files
        <a data-toggle="collapse" class="float-right" href="#collapseFiles" 
          role="button" aria-expanded="true" data-target="#collapseFiles" 
          aria-controls="collapseNotes">
            <i class="fas fa-angle-up></i>
        </a>
    </h5>
</div>
<div id="headingTwo">
             <h5 class="card-title">
             Or Notes
                <a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
                        <i class="fas fa-angle-down"></i>
                </a>
              </h5>
  </div>
<div id="headingThree">
             <h5 class="card-title">
             Or Names
                <a data-toggle="collapse" class="float-right" href="#collapseNames" role="button" aria-expanded="false" data-target="#collapseNames" aria-controls="collapseNotes">
                        <i class="fas fa-angle-down"></i>
                </a>
              </h5>
  </div>

and this is the jquery.

if ($('a').attr('aria-expanded').val() == 'true') {
    $("a i").attr("class", "fa-angle-down");
} else {
    $("a i").attr("class", "fa-angle-up");
}

Answer 1

I know you might want to do it using JavaScript, but I have a pure CSS way to do it:

HTML

I removed all unnecessary attributes on the anchor tag. I also removed fa-angle-down on the icon. The icon state will be set via CSS.

<div id="headingOne">
    <h5 class="card-title">
        Or Files
        <a data-toggle="collapse" class="float-right" data-target="#collapseFiles">
            <i class="fas"></i>
        </a>
    </h5>
    <div class="card-body">
        <p id="collapseFiles" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>
<div id="headingTwo">
    <h5 class="card-title">
        Or Notes
        <a data-toggle="collapse" class="float-right" data-target="#collapseNotes">
            <i class="fas"></i>
        </a>
    </h5>
    <div class="card-body">
        <p id="collapseNotes" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>
<div id="headingThree">
    <h5 class="card-title">
        Or Name
        <a data-toggle="collapse" class="float-right" data-target="#collapseNames">
            <i class="fas"></i>
        </a>
    </h5>
    <div  class="card-body">
        <p id="collapseNames" class="card-text collapse show">
            Some quick example text to build on the card title and make up the bulk of 
            the card's content.
        </p>
    </div>
</div>

CSS

You can write CSS to target any anchor tag that has data-toggle="collapse" attribute. When it collapses, Bootstraps adds .collapsed class so that you can use it to style the icon accordingly.

a[data-toggle="collapse"] i.fas:before {
    content: "\f107";    /* angle-down */
}

a[data-toggle="collapse"].collapsed i.fas:before {
    content: "\f106";    /* angle-up */
}

Screenshots

Fiddle Demo

https://jsfiddle.net/davidliang2008/og1t8ksj/26/