change text inside accordion item when expanded/closed

footer-scripts.html

<script>

document.addEventListener('DOMContentLoaded', () => {

    const accordionSelector = '.my-accordion';  /* selector for pro accordion element */
    const textSelector = '.my-text';            /* selector for element inside accordion item where the texts should change */
    const openText = 'open'                     /* the text to add when accordion item opened */
    const closedText = 'closed'                 /* the text to add when accordion item closed */

    function updateAccordionTexts(accordion) {
        accordion.querySelectorAll('.x-accordion_item').forEach(item => {
            const header = item.querySelector('.x-accordion_header');
            const textElement = item.querySelector(textSelector);

            if (!header || !textElement) return;

            textElement.textContent = header.getAttribute('aria-expanded') === 'true' ? openText : closedText;
        });
    }

    document.querySelectorAll(accordionSelector).forEach(accordion => {

        updateAccordionTexts(accordion);

        accordion.addEventListener('x_accordion:expand', () => {
            setTimeout(() => updateAccordionTexts(accordion), 10);
        });
    });

});

</script>