<details>
  <summary>Click me!</summary>
  <p>Hidden content that will be revealed.</p>
</details>

Метод 2: использование переключателей и хитростей CSS

Еще один умный подход предполагает использование переключателей и приемов CSS для достижения эффекта аккордеона. Используя одноуровневый селектор в CSS, мы можем связать переключатели с разделами контента и переключать их видимость. Вот пример:

<input type="radio" id="accordion1" name="accordion">
<label for="accordion1">Section 1</label>
<div class="content">
  <p>Content for Section 1</p>
</div>
<input type="radio" id="accordion2" name="accordion">
<label for="accordion2">Section 2</label>
<div class="content">
  <p>Content for Section 2</p>
</div>

Метод 3. Использование классов JavaScript и CSS

Для большего контроля над поведением аккордеона и анимацией можно использовать JavaScript. Переключая классы CSS с помощью JavaScript, мы можем добиться плавных переходов и настроить аккордеон в соответствии с потребностями нашего дизайна. Вот пример:

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Content for Section 1</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Content for Section 2</p>
</div>
<script>
  const accordions = document.getElementsByClassName("accordion");
  for (let i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener("click", function() {
      this.classList.toggle("active");
      const content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
</script>

Это лишь некоторые из множества доступных методов создания эффектов аккордеона с использованием встроенных тегов HTML. В зависимости от требований вашего проекта и личных предпочтений вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Так что смело экспериментируйте с этими методами, чтобы улучшить свои навыки веб-разработки!

В заключение мы рассмотрели различные методы создания эффектов аккордеона с использованием HTML-тегов. Предпочитаете ли вы простой подход с тегами