File: D:/HostingSpaces/SBogers10/helder.komma.pro/resources/assets/js/site/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();