How to fix accordions on mobile screen when changing orientation in which they should not work and back to mobile screen?

Question

JavaScript

Hello, there is such a problem here is my accordion script

import enquire from 'enquire-js';

function triggerAccordeon() {
    const faqsElement = document.querySelectorAll('.tab-trigger');

    const mobileAccordeon = () => {
        function calculateOffsetTop() {
            for (let i = 0; i < faqsElement.length; i++) {
                faqsElement[i].dataset.offset = faqsElement[i].getBoundingClientRect().top + window.scrollY - 50;
            }
        }

        calculateOffsetTop();

        let description = document.querySelectorAll('.tabs--mobile');
        description.forEach((item) => {
            const firstTab = item.querySelector('.tab-first .details-width');
            item.querySelector('.tab-first').style.maxHeight = firstTab.offsetHeight + "px";
        });

        for (let i = 0; i < faqsElement.length; i++) {
            faqsElement[i].addEventListener('click', function () {
                accordionClick(event.target);
            }, {
                passive: false
            });
        }

        const accordionClick = (eventHappened) => {
            const targetClicked = event.currentTarget;
            let classClicked = targetClicked.classList;
            while ((classClicked[1] != "tab-trigger")) {
                targetClicked = targetClicked.parentElement;
                classClicked = targetClicked.classList;
            }
            let description = targetClicked.nextElementSibling;
            let expander = targetClicked.children[0];
            if (description.style.maxHeight) {
                description.style.maxHeight = null;
                targetClicked.classList.remove('active');
            } else {
                const tabs = document.querySelectorAll('.tab-content');
                for (let i = 0; i < tabs.length; i++) {
                    if (tabs[i].style.maxHeight) {
                        tabs[i].style.maxHeight = null;
                        tabs[i].previousElementSibling.classList.remove('active');
                    }
                }
                description.style.maxHeight = description.scrollHeight + "px";
                console.log(description);
                targetClicked.classList.add('active');

                let topPosisitionTrigger = targetClicked.dataset.offset;

                setTimeout(function () {
                    window.scrollTo({
                        top: topPosisitionTrigger,
                        behavior: "smooth"
                    });
                }, 200);

            }
        }
    }

    const desktopAccordeon = () => {
        faqsElement.forEach(function (trigger) {
            trigger.addEventListener('click', function () {
                const id = this.getAttribute('data-tab'),
                    content = document.querySelector('.tab-content[data-tab="' + id + '"]'),
                    activeTrigger = document.querySelector('.tab-trigger.active'),
                    activeContent = document.querySelector('.tab-content.active');

                if (activeTrigger) {
                    activeTrigger.classList.remove('active');
                }

                trigger.classList.add('active');

                if (activeContent) {
                    activeContent.classList.remove('active');
                }

                content.classList.add('active');
                // window.location = this.getAttribute('href');
            }, {
                passive: false
            });
        });
    }

    enquire.register('screen and (min-width: 768px)', {
        match: function () {
            desktopAccordeon();
        },
        unmatch: function () {
            mobileAccordeon();
        },
    });

    enquire.register('screen and (max-width: 767px)', {
        match: function () {
            mobileAccordeon();
        },
        unmatch: function () {
            desktopAccordeon();
        },
    });
}

export default triggerAccordeon;

the code itself successfully works on a screen below 767px as indicated in the media query, but if you change the width of the screen, that is, turn the phone horizontally when the code should no longer work and then return it back to a width less than 767, then the code stops working correctly, clicks work out but by itself the accordion toggle stops working until the page is reloaded. Please suggest a possible error in the code

Answer 1

make addEventListener('resize',and update enquire.register
To update, shove them into a function, and run the function at startup and resize)
According to the idea, it should help)