window.addEventListener('load', (event) => {

    const accordions = document.querySelectorAll('[data-accordion]')
    
    accordions.forEach(accordion => {
        const title = accordion.querySelector('[data-accordion-title]')
        const content = accordion.querySelector('[data-accordion-content]')
        title.addEventListener('click', function(){
            //close all other accordions
            accordions.forEach(item => { 
                if (item != accordion) {                    
                    item.classList.remove('is-toggled')
                    item.querySelector('[data-accordion-content]').style.display = 'none'
                }
            })
            //open clicked accordion
            accordion.classList.toggle('is-toggled')
            content.style.display = content.style.display == 'none' ? 'block' : 'none';
        })
    })

})