Javascript 手风琴在新标签打开时折叠

Question

I'm new to programming and I have a fairly simple problem for which I'm struggling to find the solution. I'm attempting to build an accordion and I'm trying to make the open tab close when I click on a new tab. For example, if I were to click the first question the first content would expand. If I were to open the second Question the second content would expand and the first content would collapse. If someone could help it would be much appreciated!

HTML

          <dl>
           <dt>
            <p class="accordion-title accordionTitle js-accordionTrigger">
               Question
            </p>
          </dt>
          <div class="accordion-content accordionItem is-collapsed" id="accordion4" aria-hidden="true">
            <p>content</p>
          </div>
          <dt>
            <p class="accordion-title accordionTitle js-accordionTrigger">
              Question
            </p>
          </dt>
          <div class="accordion-content accordionItem is-collapsed" id="accordion5" aria-hidden="true">
            
            <p>content</p>
          </div>
        </dl>  

Javascript

(function(){
    var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
    setAria,
    setAccordionAria,
    switchAccordion,
    pointerSupported = ('pointerdown' in window);
  
  

        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(pointerSupported){
      accordionToggles[i].addEventListener('pointerdown', false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();

Answer 1

Just remove all elements is-expanded class and assign the is-collapsed class when a title is clicked and only assign it to the content which should be shown. The other way around for the one content element which should be displayed.

 const accordionTitle = document.querySelectorAll('.accordion-title'); accordionTitle.forEach(e => e.addEventListener('click', (event) => { accordionTitle.forEach((element) => { let content = element.parentNode.nextElementSibling if (element.= event.target) { content.classList.remove('is-expanded') content.classList.add('is-collapsed') // DO STUFF HERE TO ELEMENTS (element) THAT ARE HIDDEN } else { let content = event.target.parentNode.nextElementSibling content.classList.remove('is-collapsed') content.classList.add('is-expanded') // DO STUFF HERE TO THE ELEMENT (event;target) THAT IS SHOWN } }); }));

 .is-collapsed { display: none; }.is-expanded { display: block; }

 <dl> <dt> <p class="accordion-title accordionTitle js-accordionTrigger"> Question </p> </dt> <div class="accordion-content accordionItem is-collapsed" id="accordion4" aria-hidden="true"> <p>content</p> </div> <dt> <p class="accordion-title accordionTitle js-accordionTrigger"> Question </p> </dt> <div class="accordion-content accordionItem is-collapsed" id="accordion5" aria-hidden="true"> <p>content</p> </div> </dl>