document.getElementById('expandListTrigger').addEventListener('click', function() {
    const expandable = document.getElementById('listingExpandable');
    const gridElement = expandable.querySelector('.secMainInsideGrid');
    const triggerButton = document.getElementById('expandListTrigger'); // Get the trigger button

    // Toggle the class
    expandable.classList.toggle('containerMainUnlocked');

    // Check if the class is now present
    if (expandable.classList.contains('containerMainUnlocked')) {
        // Calculate the number of columns based on the window width
        const minWidth = 1500;
        const additionalWidth = Math.floor((window.innerWidth - minWidth) / 500);
        const columns = Math.max(1, additionalWidth + 5); // Ensure at least 1fr

        // Set the grid template columns style
        gridElement.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;

        // Change the text to "Collapse"
        triggerButton.childNodes[1].textContent = 'Collapse'; // Change the text node
    } else {
        // Reset the style when toggled off
        gridElement.style.gridTemplateColumns = '';

        // Change the text to "Expand"
        triggerButton.childNodes[1].textContent = 'Expand'; // Change the text node
    }
});

// Optional: Update the grid layout on window resize
window.addEventListener('resize', function() {
    const expandable = document.getElementById('listingExpandable');
    const gridElement = expandable.querySelector('.secMainInsideGrid');

    if (expandable.classList.contains('containerMainUnlocked')) {
        const minWidth = 1500;
        const additionalWidth = Math.floor((window.innerWidth - minWidth) / 500);
        const columns = Math.max(1, additionalWidth + 5); // Ensure at least 1fr

        gridElement.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
    }
});