手风琴菜单打开和关闭

Question

I am working on an accordion style menu with 5 section, each of which has a submenu. Section can be opened and closed by clicking on them. The problem is that when a user clicks on a new section the previous section stays open. I am trying to figure out a way to get trigger a section to close automatically when the user clicks on a different section so only the latest section they click on stays open. MY code is below.

Code uploaded to Fiddle https://jsfiddle.net/brianmaddendesign/spacbe9y/

 (function() { var d = document, accordionToggles = d.querySelectorAll('.js-accordionTrigger'), setAria, setAccordionAria, switchAccordion, touchSupported = ('ontouchstart' in window), pointerSupported = ('pointerdown' in window); skipClickDelay = function(e) { e.preventDefault(); e.target.click(); } setAriaAttr = function(el, ariaType, newProperty) { el.setAttribute(ariaType, newProperty); }; setAccordionAria = function(el1, el2, expanded) { switch (expanded) { case "true": setAriaAttr(el1, 'aria-expanded', 'true'); setAriaAttr(el2, 'aria-hidden', 'false'); break; case "false": setAriaAttr(el1, 'aria-expanded', 'false'); setAriaAttr(el2, 'aria-hidden', 'true'); break; default: break; } }; //function switchAccordion = function(e) { console.log("triggered"); e.preventDefault(); var thisAnswer = e.target.parentNode.nextElementSibling; var thisQuestion = e.target; if (thisAnswer.classList.contains('is-collapsed')) { setAccordionAria(thisQuestion, thisAnswer, 'true'); } else { setAccordionAria(thisQuestion, thisAnswer, 'false'); } thisQuestion.classList.toggle('is-collapsed'); thisQuestion.classList.toggle('is-expanded'); thisAnswer.classList.toggle('is-collapsed'); thisAnswer.classList.toggle('is-expanded'); thisAnswer.classList.toggle('animateIn'); }; for (var i = 0, len = accordionToggles.length; i < len; i++) { if (touchSupported) { accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); } if (pointerSupported) { accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); } accordionToggles[i].addEventListener('click', switchAccordion, false); } })(); 

Answer 1

I added a little code to your fiddle . Hope this is what you're looking for.

var menuTitle = document.querySelectorAll('.accordion-content'),
      menuCont = document.querySelectorAll('.accordion-title'),
    i = 0;

while(i < menuTitle.length) {
    if(!e.target.classList.contains('is-expanded')) {
        menuTitle[i].classList.remove('is-expanded', 'animateIn');
        menuTitle[i].classList.add('is-collapsed');
        menuCont[i].classList.remove('is-expanded', 'is-collapsed');
    };
    i++;
};

When you click a menu item, it checks to see if any menu element is expanded and closes that element before running your code.