const CLASS_TO_TOGGLE = 'accordion__icon--minus'; // A class defined in the stylesheet const ACCORDION_ICON_CLASS = '.accordion__icon'; // Specific class in the HTML (from `_includes/accordion.html`)! const COLLAPSE_STATES_ARR = ['show.bs.collapse', 'hide.bs.collapse']; // BOOTSTRAP 4 specific collapse states const COLLAPSE_JQUERY_SELECTOR = '.collapse:not(.navbar-collapse)'; // BOOTSTRAP 4 jQuery selector for callapseable divs function toggleClass(el) { return el.classList.toggle(CLASS_TO_TOGGLE); } function findAccordionIcon(parent) { const thisAccordionIcon = parent.querySelector(ACCORDION_ICON_CLASS); toggleClass(thisAccordionIcon); } function onCollapseChangeFunction(stateChange) { $(COLLAPSE_JQUERY_SELECTOR).on(stateChange, function (e) { // BOOTSTRAP 4 METHOD: https://getbootstrap.com/docs/4.3/components/collapse/#events if (e.target.parentNode.parentNode.id === 'accordion') { // FILTERS OUT COLLAPSE STATE_CHANGES THAT ARE NOT INSIDE AN ACCORDION const COLLAPSE_PARENT = e.target.parentElement; // SPECIFIC TO THE BOOTSTRAP 4 COLLAPSE EVENT //console.log(e); findAccordionIcon(COLLAPSE_PARENT); } }); } function loopOverArr(arr) { let len = arr.length; for (var i = 0; i < len; i++) { onCollapseChangeFunction(arr[i]); } } function accordion() { if ( !document.querySelector('[id^="collapse"]') && !document.querySelector('.accordion__icon') ) { // These ID's and CLASSES are unique to the _includes/accordion.html template. return; // Bail out if the accordion is NOT in the page! } loopOverArr(COLLAPSE_STATES_ARR); } export default accordion;