https://i.sstatic.net/7b8XY.png
Above you see the default icon. It works perfectly when I click to open the categories.
https://i.sstatic.net/4bJjF.png
However, an issue arises when I click on the dropdown button again to close it. The dropdown closes but the icon fails to return to its original position i.e. angle-down.
https://i.sstatic.net/gFjtL.png
If I click anywhere outside the categories button to close the dropdown, the icon changes back to angle-down. Yet, clicking on the button doesn't revert the icon to its default state.
Here is my HTML code:
<button class="dropbtn">
<i class="fa-solid fa-border-all"></i>
<p>Browse All Categories</p>
<i class="smallicon fa-solid fa-angle-down"></i>
</button>
This is my JS code:
document.querySelector('.dropbtn').addEventListener('click', function(event) {
event.stopPropagation();
var dropdownContent = this.nextElementSibling;
var angleIcon = this.querySelector('.fa-angle-down');
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
angleIcon.classList.remove('fa-angle-up');
angleIcon.classList.add('fa-angle-down');
} else {
dropdownContent.style.display = 'block';
angleIcon.classList.remove('fa-angle-down');
angleIcon.classList.add('fa-angle-up');
}
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
var dropdowns = document.querySelectorAll('.dropdown-content');
dropdowns.forEach(function(dropdown) {
if (dropdown.style.display === 'block' && !event.target.closest('.dropdown')) {
dropdown.style.display = 'none';
var angleIcon = dropdown.previousElementSibling.querySelector('.fa-angle-up');
if (angleIcon) {
angleIcon.classList.remove('fa-angle-up');
angleIcon.classList.add('fa-angle-down');
}
}
});
});