I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, the rotation only happens while holding down the mouse click, then reverts back as soon as the click is released. Can anyone provide assistance with this?
Styling CSS
.arrow:active {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
HTML Structure
<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 Functionality
$('.arrow').click(function() {
$(this).toggleClass('active');
});