Блог

Я новичок в программировании, и у меня есть довольно простая проблема, для которой я изо всех сил пытаюсь найти решение. Я пытаюсь создать аккордеон и пытаюсь закрыть открытую вкладку, когда я нажимаю на новую вкладку. Например, если бы я нажал на первый вопрос, первый контент расширился бы. Если бы я открыл второй вопрос, второй контент расширился бы, а первый контент свернулся бы. Если бы кто-нибудь мог помочь, я был бы очень признателен!

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);
  }
})();
 

Просто удалите is-expanded класс всех элементов и назначьте is-collapsed класс при нажатии на заголовок и назначьте его только тому содержимому, которое должно отображаться. Наоборот, для одного элемента содержимого, который должен отображаться.

 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>