Как сделать аккордеон в html css

Аккордеон — это интерфейс, который позволяет скрыть и раскрыть блоки с содержимым по клику на заголовок. Вот как создать простой аккордеон с использованием HTML и CSS:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 1</div>
    <div class="accordion-content">
      <p>Содержимое 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 2</div>
    <div class="accordion-content">
      <p>Содержимое 2</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 3</div>
    <div class="accordion-content">
      <p>Содержимое 3</p>
    </div>
  </div>
</div>

Здесь мы создали родительский элемент с классом «accordion» и вложили в него несколько элементов блоков «accordion-item». Каждый блок аккордеона состоит из заголовка (accordion-header) и содержимого (accordion-content).

Теперь добавим стили для аккордеона:

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.show {
  display: block;
}

Здесь мы добавили общие стили для блоков аккордеона, установили рамку и отступы для каждого элемента «accordion-item». Также добавили стили для заголовков и содержимого.

Хитрость заключается в том, что по умолчанию содержимое каждого блока скрыто с помощью свойства display: none. Но по клику на заголовок у нас будет происходить изменение свойства display на block, что позволит раскрыть содержимое блока.

Добавим JavaScript код для аккордеона:

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', event => {
    const accordionContent = event.target.nextElementSibling;

    if (accordionContent.style.display === 'block') {
      accordionContent.style.display = 'none';
    } else {
      accordionContent.style.display = 'block';
    }
  });
});

Здесь мы используем метод querySelectorAll, чтобы получить все элементы заголовков аккордеона, и добавляем для каждого обработчик события клика. Далее мы получаем следующий элемент после заголовка (здесь это элемент с классом «accordion-content») и изменяем его свойство display. Это позволяет скрыть и раскрыть содержимое блока.

Таким образом, мы создали простой аккордеон с помощью HTML, CSS и JavaScript. Можно дополнительно добавить стили, а также применять более продвинутые методы для аккордеонов.