Как реализовать анимированный аккордеон без JavaScript, используя HTML-элемент <label>, <input type="checkbox"> и CSS-переход?

Принцип работы аккордеона на CSS

Аккордеон без JavaScript строится на "чекбокс-хаке": скрытый элемент <input type="checkbox"> хранит состояние (открыт/закрыт), а связанный с ним <label> служит видимой кнопкой. Когда пользователь кликает по метке, чекбокс переключается, и CSS-селектор :checked применяет стили к соседним элементам, показывая или скрывая контент.

Базовая структура HTML

<div class="accordion">
  <input type="checkbox" id="item1" class="accordion-input">
  <label for="item1" class="accordion-label">Заголовок 1</label>
  <div class="accordion-content">
    <p>Содержимое панели.</p>
  </div>
</div>

CSS для анимации

Для плавного открытия используется свойство max-height с переходом. Изначально контент скрыт (max-height: 0; overflow: hidden), а при активации чекбокса — расширяется до большого значения.

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-input:checked ~ .accordion-content {
  max-height: 200px; /* достаточно большое значение */
}

Применение и ограничения

Такой подход подходит для простых интерфейсов, где не требуется сложная логика или множественные открытые панели. Для аккордеона с единственной открытой секцией можно использовать <input type="radio"> с одинаковым именем. Однако метод не поддерживает анимацию высоты точно (из-за фиксированного max-height) и неудобен для динамического контента.

Вывод

Чисто CSS-аккордеон — отличное решение для статичных страниц, где важна производительность и отсутствие зависимостей от JavaScript. Он прост в реализации, но ограничен в гибкости и точности анимации.