让带有箭头的 Bootstrap 4 在打开和关闭时旋转 90 度

Question

我试图让我的 bootstrap 4 手风琴箭头在打开或关闭时旋转 90 度。所以从这个位置开始 > 并且当卡体打开时 v 。我正在使用字体很棒的 svgs。现在，当您单击 仅在 svg 上时，它们会旋转 90 度，并且在关闭时不会旋转回来。我认为我采取了错误的方法，最好在 svg 处于任一状态时进行更改。即打开时使用内容：f078，关闭时使用内容：f064

我的 HTMl 在下面是我采用的 Javascript 方法。我理解为什么 javascript 无法正常工作，但我已经尝试了许多不同的方法，但仍然无法正常工作。

<div id="case-studies" class="container" style="padding-bottom: 50px; max-width: 960px; margin: auto;">
    <div class="container" style="max-width: 960px;">

        <!--Accordion wrapper-->
        <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

            <!-- Accordion card -->
            <div class="card"
                style="border-top-right-radius: 0px; border-top-left-radius: 0px; border-top: 1px solid #D1C9C9; border-right: transparent; border-left: transparent;">

                <!-- Card header -->
                <div class="card-header" style="background-color: transparent" role="tab" id="headingOne1">
                    <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
                        aria-controls="collapseOne1">
                        <h5 class="mb-0" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 400; color: black;">
                            <i class="fas fa-angle-right rotate" style="padding-right: 10px;"></i>Example 1  
                        </h5>
                    </a>
                </div>

                <!-- Card body -->
                <div id="collapseOne1" style="background-color: transparent" class="collapse" role="tabpanel"
                    aria-labelledby="headingOne1" data-parent="#accordionEx">
                    <div class="card-body" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 300; background-color: transparent; margin-top: 10px; margin-left: 20px;">
                       Lorem Ipsum
                    </div>
                </div>

            </div>
            <!-- Accordion card -->

            <!-- Accordion card -->
            <div class="card"
                style="border-top: 1px solid #D1C9C9; border-right: transparent; border-left: transparent;">

                <!-- Card header -->
                <div class="card-header" style="background-color: transparent" role="tab" id="headingTwo2">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                        aria-expanded="false" aria-controls="collapseTwo2">
                        <h5 class="mb-0" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 400; color: black;">
                            <i class="fas fa-angle-right rotate" style="padding-right: 10px;"></i>Example 2
                        </h5>
                    </a>
                </div>

                <!-- Card body -->
                <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                    data-parent="#accordionEx">
                    <div class="card-body" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 300; background-color: transparent; margin-top: 10px; margin-left: 20px;">
                       Lorem Ipsum
                    </div>
                </div>
              </div>
            </div>


<script>
    $(".rotate").click(function(){
        $(this).toggleClass("down")  ; 
       })
    </script>
    

Answer 1

Javascript

var accordion = document.getElementsByClassName("accordion");

for (i=0;i<accordion.length;i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("accordion-active");
  });
}

CSS

.accordion:after {
    content: '\f064';
    /* other CSS styling */
}

.accordion-active:after {
    content: '\f078';
    /* other CSS styling */
}