Аккордеон (FAQ)

<div class="accordion">

  <div class="accordion__item accordion__item--opened">
    <div class="accordion__button">Заголовок</div>
    <div class="accordion__panel">
      <div class="accordion__content">
        <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
        <img src="https://kak-eto-verstat.ru/images/placeholder.png" style="width: 150px" alt="placeholder">
      </div>
    </div>
  </div>

  <div class="accordion__item">
    <div class="accordion__button">Заголовок</div>
    <div class="accordion__panel">
      <div class="accordion__content">
        <ul>
          <li>cъешь ещё</li>
          <li>этих мягких</li>
          <li>французских булок</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="accordion__item">
    <div class="accordion__button">Заголовок</div>
    <div class="accordion__panel">
      <div class="accordion__content">
        <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
         <ol>
          <li>Один</li>
          <li>Два</li>
          <li>Три</li>
        </ol>
      </div>
    </div>
  </div>

</div>

.accordion {
  width: 100%;
  max-width: 800px;
}

.accordion__item + .accordion__item {
  margin-top: 16px;
}

.accordion__button {
  position: relative;
  display: block;
  padding: 12px 52px 12px 28px;
  border-radius: 4px;
  background-color: #f0f0f0;
  font-weight: 500;
  font-size: 17px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
}

.accordion__button:hover {
  background-color: #e0e0e0;
}

.accordion__button::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.3s ease;
}

.accordion__item.accordion__item--opened .accordion__button::after {
  content: "−";
}

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  background-color: #f7f7f7;
  border-radius: 4px;
}

.accordion__content {
  padding: 16px 28px;
  font-size: 15px;
}

.accordion__content > * {
  margin-bottom: 12px;
}

.accordion__content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .accordion__button {
    padding: 14px 44px 14px 20px;
    font-size: 16px;
  }

  .accordion__button::after {
    right: 20px;
  }

  .accordion__content {
    padding: 14px 20px;
    font-size: 14px;
  }

  .accordion__content > * {
    margin-bottom: 10px;
  }

  .accordion__item + .accordion__item {
    margin-top: 10px;
  }
}

window.addEventListener( 'load', () => {

const accordionItems = document.querySelectorAll( '.accordion__item' );

accordionItems.forEach( item => {
  const button = item.querySelector( '.accordion__button' );
  const panel  = item.querySelector( '.accordion__panel' );

  if ( button && panel ) {
    panel.style.maxHeight = '0px';

    const toggle = () => {
      const opened = item.classList.toggle( 'accordion__item--opened' );
      panel.style.maxHeight = opened ? panel.scrollHeight + 'px' : '0px';
    };

    button.addEventListener( 'click', toggle );
  }
} );

window.addEventListener( 'resize', () => {
  document.querySelectorAll( '.accordion__item.accordion__item--opened .accordion__panel' ).forEach( panel => {
    panel.style.maxHeight = panel.scrollHeight + 'px';
  } );
} );

document.querySelectorAll( '.accordion__item.accordion__item--opened .accordion__panel' ).forEach( panel => {
  panel.style.maxHeight = panel.scrollHeight + 'px';
});

});