4 способа создать удивительные аккордеоны только для CSS

Контентные аккордеоны создают полезный шаблон дизайна. Вы можете использовать их для разных целей: для меню, списков, изображений, выдержек из статей, фрагментов текста и даже видео.

Большинство аккордеонов полагаются на JavaScript, в основном на jQuery, но, поскольку использование передовых методов CSS3 стало широко распространенным, мы также можем найти хорошие примеры, которые используют только HTML и CSS, которые делают их доступными в средах с отключенным JavaScript.

Создание аккордеонов только для CSS может быть сложной задачей, поэтому в этом посте мы попытаемся понять основные концепции, которые используют разработчики, когда им нужно их создать.

При создании вкладок только для CSS обычно есть два основных подхода, каждый из которых имеет два варианта использования. Первый подход использует скрытые элементы формы, а второй использует псевдоселекторы CSS.

1. Метод радио-кнопки

Метод Radio Button добавляет скрытый радиовход и соответствующий ярлык для каждой вкладки аккордеона. Логика проста: когда пользователь выбирает вкладку, он в основном проверяет переключатель, который принадлежит этой вкладке, точно так же, как при заполнении формы. Когда они нажимают на следующую вкладку в аккордеоне, они выбирают следующий переключатель и т. Д.

В этом методе одновременно может быть открыта только одна вкладка. Логика HTML выглядит чем-то
  нравится:

Вам нужно добавить отдельную пару радио-меток для каждой вкладки в аккордеоне. Один только HTML не даст желаемого поведения, вам также нужно добавить соответствующие CSS-правила, давайте посмотрим, как этого добиться.
Вертикальные вкладки с фиксированной высотой
В этом решении (см. Скриншот ниже) разработчик скрыл переключатель с помощью дисплея: нет; Правило, затем он дал относительную позицию для метки метки, которая содержит заголовок каждой вкладки, и абсолютную позицию для соответствующей метки: после псевдоэлемента.

Последний содержит маркер, помеченный зеленым знаком +, который открывает вкладки. Закрытые вкладки также используют ручку, отмеченную зелеными знаками «-». В CSS закрытые вкладки выбираются с помощью элемент + элемент селектор.

Вам также нужно придать содержимому открытой вкладки фиксированную высоту. Для этого выберите тело открытой вкладки (помеченное классом tab-content в HTML выше) с помощью element1 ~ element2 CSS селектор.

Основная логика CSS здесь заключается в следующем:

вход[type=radio] {
дисплей: нет;
}
метка {
положение: относительное;
дисплей: блок;
}
ярлык: после {
содержание: “+”;
положение: абсолютное;
справа: 1em;
}
вход: проверено + метка: после {
содержание: “-“;
}
вход: проверено ~ .tab-content {
высота: 150 пикселей;
}

Вы можете взглянуть на полный CSS здесь на Codepen, CSS изначально написан на Sass, но если вы нажмете кнопку «Просмотр скомпилированного», вы увидите скомпилированный файл CSS.
ИЗОБРАЖЕНИЕ: Codepen от Jon YablonskiИзображение Аккордеон с Радио Кнопками
Этот красивый аккордеон изображения использует тот же метод переключателя, но вместо меток разработчик использовал HTML-тег figcaption, чтобы реализовать поведение аккордеона.

CSS несколько отличается, в основном потому, что в этом случае вкладки располагаются не вертикально, а горизонтально. Разработчик использовал CSS + селектор element + element (который использовался в предыдущем случае для выбора переключателей), чтобы гарантировать, что края покрытых изображений все еще остаются
  видимый.
ИЗОБРАЖЕНИЕ: Tympanus.netПрочитайте подробное руководство о том, как создать этот элегантный аккордеон только для CSS.

2. Метод флажка

Метод флажка использует переключатель типа флажка вместо переключателя. Когда пользователь выбирает вкладку, он в основном устанавливает соответствующий флажок.

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

С другой стороны, вкладки не закрываются сами по себе, когда пользователь нажимает на другую. Логика HTML та же, что и раньше, просто в этом случае вам нужно использовать флажок для типа ввода.

</div>

<!-- Other Tabs with The Same Structure -->