43 lines
1.8 KiB
JavaScript
43 lines
1.8 KiB
JavaScript
|
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)`;
|
||
|
|
}
|
||
|
|
});
|