我有一个svg箭头图像在我的Bootstrap 4手风琴卡的每个头。我希望打开的页眉箭头在打开时旋转180度，如果我关闭它或打开另一个页眉，则切换回它的初始状态。现在箭头只在我按住点击时旋转，然后在我松开鼠标时返回到初始状态。有人帮忙吗？

CSS

.arrow:active {
          
        -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
         
}

HTML

<div class="card">
      <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite? 
        </button>
          <img src="images/icon-arrow-down.svg" class="arrow" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         You can invite up to 2 additional users on the Free plan. There is no limit on 
  team members for the Premium plan.
      </div>
    </div>
  </div>

JavaScript

    $('.arrow').click(function() {
    $(this).toggleClass('active');
});