HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/gggg.komma.nl/resources/js/components/accordionHandler.js
/* ==========================================================================
   Accordion handler
   - Handles the accordion component which has the proper classes.
 ========================================================================== */

const AccordionHandler = {

    init: function () {

        const accordionList = document.querySelectorAll('.js-accordion');
        const accordionListCount = accordionList.length;

        if(isset(accordionList) && accordionListCount !== 0){
            for(let i = 0; i < accordionListCount; i++){
                const accordion = accordionList[i];
                AccordionHandler.initAccordion(accordion);
            }
        }
    },

    initAccordion: function (accordion) {

        /*
        * Set "pointer events: none" on all direct children of the toggle
        * Because we don't want clicks on them to register, only on the parent toggle element
        */
        const toggleList = accordion.querySelectorAll('.js-accordion-toggle');
        for (var i = 0; i < toggleList.length; i++) {
            var toggleItem = toggleList[i];

            for (var j = 0; j < toggleItem.children.length; j++) {
                var toggleChild = toggleItem.children[j];

                toggleChild.style.pointerEvents = "none";
            }

        }
        accordion.addEventListener('click', AccordionHandler.toggleAccordion, false);
    },

    toggleAccordion: function (event) {
        const item = event.target.parentNode;
        const itemList = item.parentNode.children;

        // Bail if we didn't click on the toggle element
        if (!event.target.classList.contains('js-accordion-toggle')) return;

        // Check if content element exists
        if (!item.querySelector('.js-accordion-content')) return;

        // Prevent default link behavior
        event.preventDefault();

        // If the item is already active, collapse it and quit
        if (item.classList.contains('is-active')) {
            item.classList.remove('is-active');
            return;
        }

        // Loop through all open accordion items, and close them
        for (var i = 0; i < itemList.length; i++) {
            itemList[i].classList.remove('is-active');
        }

        // Toggle our content by setting the active class
        item.classList.toggle('is-active');
    }
};

AccordionHandler.init();