After experimenting with rotating SVG images on my navbar buttons, I encountered an issue. Whenever I click one button, all the images rotate simultaneously. Additionally, clicking elsewhere does not reset the images to their original positions.
This is the HTML code:
<!-- === Dropdown Menu === -->
<div class="collapse navbar-collapse" id="navToggler">
<div class="dropdown">
<button class="btn" type="button" id="navButton1" data-bs-toggle="dropdown" aria-expanded="false">
Product <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
</button>
<ul class="dropdown-menu" aria-labelledby="navButton1">
<li><a class="dropdown-item" href="#">Overview</a></li>
<li><a class="dropdown-item" href="#">Pricing</a></li>
<li><a class="dropdown-item" href="#">Marketplace</a></li>
<li><a class="dropdown-item" href="#">Features</a></li>
<li><a class="dropdown-item" href="#">Integrations</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn" type="button" id="navButton2" data-bs-toggle="dropdown" aria-expanded="false">
Company <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
</button>
<ul class="dropdown-menu" aria-labelledby="navButton2">
<li><a class="dropdown-item" href="#">About</a></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><a class="dropdown-item" href="#">Career</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn" type="button" id="navButton3" data-bs-toggle="dropdown" aria-expanded="false">
Connect <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
</button>
<ul class="dropdown-menu" aria-labelledby="navButton3">
<li><a class="dropdown-item" href="#">Contact</a></li>
<li><a class="dropdown-item" href="#">Newsletter</a></li>
<li><a class="dropdown-item" href="#">LinkedIn</a></li>
</ul>
</div>
</div>
<!-- END -->
CSS:
.rotate {
transform: rotate(180deg);
transition: .3s;
}
.arrow.reset{
transform: rotate(0deg);
transition: .3s;
}
Javascript:
$("button.btn").on("click", function () {
$(".arrow").toggleClass("rotate");
$(".arrow").toggleClass("reset");
});
Desired behavior on click:
Current behavior on click:
Behavior when clicking elsewhere: