«Аккордеон» — это UI-компонент, где можно раскрывать и сворачивать блоки с контентом.

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

Пример реализации с использованием <input type="checkbox">:

<style>
  .accordion input {
    display: none;
  }
  .accordion label {
    display: block;
    padding: 10px;
    background: #eee;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  .accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
  }
  .accordion input:checked + label + .content {
    max-height: 200px; /* или auto, но с max-height лучше анимация */
    padding: 10px;
  }
</style>

<div class="accordion">
  <input type="checkbox" id="section1" />
  <label for="section1">Заголовок 1</label>
  <div class="content">
    <p>Содержимое секции 1</p>
  </div>

  <input type="checkbox" id="section2" />
  <label for="section2">Заголовок 2</label>
  <div class="content">
    <p>Содержимое секции 2</p>
  </div>
</div>

Такой подход позволяет раскрывать и сворачивать секции без JavaScript, используя только CSS и HTML.

Если нужен аккордеон, где открыта только одна секция, можно использовать радиокнопки вместо чекбоксов.

Знаком ли ты с понятием «аккордеон»? Как можно реализовать данный компонент без JavaScript?