Как сделать чтобы в аккордионе при клике на один другой закрывался?

Question

[StasTih]

---------------------------------------------------------------------------Accordion
<div class="accordions">
        <ul class="accordion__list">
          <li class="accordion">
            <button class="accordion__control" aria-expanded="false">
              <span class="accordion__icon"></span>
              <span class="accordion__title">Аккордион 1</span>
            </button>
            <div class="accordion__content" aria-hidden="true">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus unde dolore nesciunt doloribus doloremque reiciendis molestiae tempore quia consequuntur eveniet iste blanditiis aperiam, nihil, officia itaque, expedita ab a optio?</p>
            </div>
          </li>
          <li class="accordion">
            <button class="accordion__control" aria-expanded="false">
              <span class="accordion__icon"></span>
              <span class="accordion__title">Аккордион 1</span>
            </button>
            <div class="accordion__content" aria-hidden="true">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus unde dolore nesciunt doloribus doloremque reiciendis molestiae tempore quia consequuntur eveniet iste blanditiis aperiam, nihil, officia itaque, expedita ab a optio?</p>
            </div>
          </li>
        </ul>
      </div>
--------------------------------------------------------------------------CSS---------------------------------------------------------
.accordion__control {
  background: inherit;
  cursor: pointer;
}
.accordion__icon {
  position: relative;
  padding-left: 30px;
}
.accordion__icon::after {
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #000000;
  left: 0;
  top: 7px;
  transition: all 0.3s ease-out;
}
.accordion__icon::before {
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #000000;
  left: 0;
  top: 7px;
  transform: rotate(90deg);
  transition: all 0.3s ease-out;
}
.accordion__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  will-change: max-height;
  transition: all 0.3s ease-out;
  box-sizing: content-box;
}
.open .accordion__content {
  opacity: 1;
  padding: 20px;
}
.open .accordion__icon::before {
  transform: rotate(-40deg);
}
.open .accordion__icon::after {
  transform: rotate(40deg);
}
--------------------------------------------------------------------------JS---------------------------------------------------------
document.addEventListener('DOMContentLoaded', () => {
  const accordions = document.querySelectorAll('.accordion');

  accordions.forEach(el => {
    el.addEventListener('click', (e) => {
      const self = e.currentTarget;
      const control = self.querySelector('.accordion__control');
      const content = self.querySelector('.accordion__content');

      self.classList.toggle('open');

      if (self.classList.contains('open')) {
        control.setAttribute('aria-expanded', true);
        content.setAttribute('aria-hidden', false);
        content.style.maxHeight = content.scrollHeight + 'px';
      } else {
        control.setAttribute('aria-expanded', false);
        content.setAttribute('aria-hidden', true);
        content.style.maxHeight = null;
      }

    })
  })
});
 <code>

Comments

[VoidVolker]

Повесить обработчик на клик, далее закрыть другой. В чем сложность-то?

Answer 1

[Константин]

Вот так должно работать

document.addEventListener('DOMContentLoaded', () => {
  const accordions = document.querySelectorAll('.accordion');

  accordions.forEach(el => {
    el.addEventListener('click', (e) => {
      const self = e.currentTarget;
      const control = self.querySelector('.accordion__control');
      const content = self.querySelector('.accordion__content');

      accordions.forEach(el => {
        const control = el.querySelector('.accordion__control');
        const content = el.querySelector('.accordion__content');
        if(self !== el){ 
          el.classList.remove('open');
          control.setAttribute('aria-expanded', false);
          content.setAttribute('aria-hidden', true);
          content.style.maxHeight = null;
        }
      })
      self.classList.toggle('open');

      if (self.classList.contains('open')) {
        control.setAttribute('aria-expanded', true);
        content.setAttribute('aria-hidden', false);
        content.style.maxHeight = content.scrollHeight + 'px';
      } else {
        control.setAttribute('aria-expanded', false);
        content.setAttribute('aria-hidden', true);
        content.style.maxHeight = null;
      }
    })
  })
});