I have a bootstrap 4 accordion, What I need is the icon to rotate and point up conditionally when the accordion is "open" and back down when it is closed. I was able to do this with css but I need it to happen conditionally as there are "active" states and not events that should trigger the accordions open if that makes sense.

HTML:

<div class="accordion" id="accordion-nav">



    <div class="accordion-item">

        <div class="item-header" id="heading">

            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"

                data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">

                <span>panel</span>

                <i class="fas fa-chevron-down "></i>

            </button>

        </div>



        <div id="collapseDosing" class="collapse collapse-nav-accordion"

            aria-labelledby="heading-dosing" data-parent="#accordion-nav">

            <div class="accordion-body">

                <div class="l-accordion-body">

                   <h1>Body</h1>>

                </div>

            </div>

        </div>

    </div>



    <div class="accordion-item accordion-item--savings">

        <div class="item-header" id="heading-savings">

            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"

                data-target="#collapseSavings" aria-expanded="false" aria-controls="collapseSavings">

                <span>panel</span>

                <i class="fas fa-chevron-down"></i>

            </button>

        </div>

        <div id="collapseSavings" class="collapse collapse-nav-accordion"

            aria-labelledby="heading-savings" data-parent="#accordion-nav">

            <div class="accordion-body">

                <div class="l-accordion-body">

                 <h1>Body</h1>

                </div>

            </div>

        </div>

    </div>

</div>

css: (did work on click event) but need another way conditionally (js) I would think

.btn-nav-accordion[aria-expanded="true"] {

  .fa-chevron-down {

    transform: rotate(180deg);

  }

}

js: currently works but does not remove the class when I click the accordion to close now

 $(".collapse-nav-accordion").each(function () {

      var currentAccordion = this;

      if ($(currentAccordion).hasClass("show")) {

        $(currentAccordion).parent().find("i").addClass("rotate");

      } else {

        $(currentAccordion).parent().find("i").removeClass("rotate");

      }

    });