<body>
  <div class="ex ex-3">
    <ul class="accordion__list">
      <li class="accordion">
        <button class="accordion__control" aria-expanded="false">
          <span class="accordion__title">Accordion 1</span>
          <span class="accordion__icon"></span>
        </button>
        <div class="accordion__content" aria-hidden="true">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga, harum!</p>
        </div>
      </li>
      <li class="accordion">
        <button class="accordion__control" aria-expanded="false">
          <span class="accordion__title">Accordion 2</span>
          <span class="accordion__icon"></span>
        </button>
        <div class="accordion__content" aria-hidden="true">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus, beatae!
          Labore, tenetur. Id culpa quas, eos magnam quos laboriosam quasi.
        </div>
      </li>
    </ul>
  </div>
</body>
</html>
.accordion {
  width: 500px;
  margin-bottom: 10px;
}

.accordion__content {
  padding: 20px;
  border: 1px solid #888;
  border-top: 1px solid transparent;
}

.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;
}
//Accordion

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.