Сегодня мы немного поэкспериментируем со смежным и родственным комбинатором и псевдо-классом :checked. Используя скрытые поля ввода и ярлыки, мы создадим гармошку для анимации областей с контентом посредством лишь кода CSS.

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

Источник