Skip to main content

Accordion Auto Scroll and Expand

Put the following code as a script on the page

Script Code 

<script>
function assignIdsToAllAccordions() {
    const accordions = document.querySelectorAll('.accordion-header');
    accordions.forEach(function(header, index) {
        const id = header.textContent.trim().toLowerCase().replace(/\s+/g, '-');
        header.id = id;
    });
}

function openAccordionWhenAvailable(selector, maxAttempts = 10, attemptInterval = 500) {
    let attempts = 0;

    const interval = setInterval(function() {
        const element = document.querySelector(selector);
        if (element) {
            clearInterval(interval);
            element.click();
            setTimeout(function() {
                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 200);
        } else if (attempts++ >= maxAttempts) {
            clearInterval(interval);
        }
    }, attemptInterval);
}

function openAndScrollToAccordionBasedOnHash() {
    if (window.location.hash) {
        openAccordionWhenAvailable(window.location.hash);
    }
}

window.addEventListener('load', function() {
    assignIdsToAllAccordions();
    openAndScrollToAccordionBasedOnHash();
});
</script>

To trigger the accordion to auto-open, you need to create a new external page that links to the page with the title of the accordion at the end. So this one will be called:

https://dreamstream.specialdistrict.org/accordion-auto-scroll-and-expand#script-code

If you visit that think while signed out, it will go to the page, scroll to the accordion, and expand it.

 FYI you may need to refresh the  page / site cache with a homepage wiggle and wait a few for it to begin working when signed out.