Javascript как сделать раскрывающийся блок

Обучимся создавать раскрывающийся блок на Javascript с примером. Узнаем, какие инструменты использовать и как правильно их сочетать, чтобы получить желаемый результат.

Для создания раскрывающегося блока в JavaScript нам понадобится использовать HTML, CSS и JavaScript. Начнем с нашего HTML-кода.

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

В приведенном выше примере мы определили два блока с заголовками, которые будут нашими кнопками для раскрытия и скрытия их содержимого, а также задали классы для их стилизации. Теперь давайте быстро пройдемся по CSS.

.accordion {
  border-radius: 8px;
}

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

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

.btn {
  border: none;
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
  background: #f0f0f0;
  padding: 10px;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

В данном примере мы задали параметры стилизации для нашего блока, а также скрыли блок с содержимым по умолчанию. Теперь мы можем перейти к JavaScript.

Задание события на кнопку

Для начала мы должны инициализировать нашу кнопку. Для этого мы используем метод querySelector():

const btn = document.querySelector('.btn');

Затем мы задаем событие на нашу кнопку с помощью метода addEventListener():

btn.addEventListener('click', function () {
  // код
});

Скрытие и раскрытие блока

Теперь мы можем написать код для отображения и скрытия нашего содержимого. Для этого мы используем querySelector() для получения блока со содержимым:

const content = this.nextElementSibling;

Затем мы проверяем значение свойства style.display блока с содержимым. Если значение равно none, мы раскрываем блок, иначе мы его скрываем:

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

Это все! Вы можете добавить дополнительный функционал, например анимацию, используя библиотеку CSS, такую как Animate.css.