layouts/partials/adaptive_details.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script>
function setDetailsOpen() {
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

    // Adjust this value based on your preferred viewport size for default open
    const viewportThreshold = 768;

    // Get all details elements
    const detailsElements = document.querySelectorAll('details');

    // Loop through details elements and set open attribute conditionally
    detailsElements.forEach(function(details) {
        if (viewportWidth >= viewportThreshold) {
            details.setAttribute('open', true);
        } else {
            details.removeAttribute('open');
        }
    });
}

// Initial call on page load
setDetailsOpen();

// Attach the function to the window resize event to handle changes dynamically
window.addEventListener('resize', setDetailsOpen);
</script>