Как сделать плавный спойлер?

Спойлер (также известный как аккордеон) - это элемент веб-страницы, который скрывает контент при загрузке страницы, но открывается или раскрывается по требованию пользователя. Для создания плавного спойлера с использованием HTML, CSS и JavaScript, можно воспользоваться следующим подходом:

1. HTML:

<div class="spoiler">
   <div class="spoiler-header">Название спойлера</div>
   <div class="spoiler-content">
      Скрытый контент
   </div>
</div>

2. CSS:

.spoiler {
   border: 1px solid #ccc;
   border-radius: 5px;
   margin-bottom: 10px;
}

.spoiler-header {
   background-color: #f2f2f2;
   padding: 10px;
   cursor: pointer;
}

.spoiler-content {
   display: none;
   padding: 10px;
   transition: max-height 0.3s ease;
   max-height: 0;
   overflow: hidden;
}

3. JavaScript:

document.addEventListener("DOMContentLoaded", function() {
   const spoilers = document.querySelectorAll(".spoiler");

   spoilers.forEach(function(spoiler) {
      const header = spoiler.querySelector(".spoiler-header");
      const content = spoiler.querySelector(".spoiler-content");

      header.addEventListener("click", function() {
         content.style.display = content.style.display === 'none' ? 'block' : 'none';

         if (content.style.display === 'block') {
            content.style.maxHeight = content.scrollHeight + "px";
         } else {
            content.style.maxHeight = 0;
         }
      });
   });
});

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