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)';
            }
        });
    }
});