30 lines
1.3 KiB
JavaScript
30 lines
1.3 KiB
JavaScript
|
document.querySelectorAll('.listingGridSecSideBoxListBtn').forEach(button => {
|
||
|
|
// Find the next sibling element with the class listingGridSecSideBoxListItems
|
||
|
|
const nextItem = button.nextElementSibling;
|
||
|
|
|
||
|
|
// Check if the next sibling exists and has the correct class
|
||
|
|
if (nextItem && nextItem.classList.contains('listingGridSecSideBoxListItems')) {
|
||
|
|
// Check if the active class is already present
|
||
|
|
const isActive = nextItem.classList.contains('listingGridSecSideBoxListItemsActive');
|
||
|
|
|
||
|
|
// Find the icon element inside the button
|
||
|
|
const icon = button.querySelector('.listingGridSecSideBoxListBtnIcon');
|
||
|
|
|
||
|
|
// Set the initial rotation based on the active state
|
||
|
|
if (icon) {
|
||
|
|
icon.style.transform = isActive ? 'rotate(180deg)' : 'rotate(0deg)';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add click event listener
|
||
|
|
button.addEventListener('click', function() {
|
||
|
|
// Toggle the active class
|
||
|
|
const isActiveNow = nextItem.classList.toggle('listingGridSecSideBoxListItemsActive');
|
||
|
|
|
||
|
|
// Rotate the icon based on the active state
|
||
|
|
if (icon) {
|
||
|
|
icon.style.transform = isActiveNow ? 'rotate(180deg)' : 'rotate(0deg)';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|