Аккордеон меню
Аккордеон представляет собой список с раскрывающимся содержимым (рис. 1). Удобен для создания больших меню из-за компактности, а также для блоков вопросов и ответов. Название произошло от музыкального инструмента, который напоминает своим видом.
Рис. 1. Вид аккордеона
Есть два типа аккордеон-меню.
- При раскрытии любого пункта списка открытое содержимое закрывается; по своему действию это похоже на вкладки.
- Можно раскрывать любой пункт списка, остальные пункты при этом не закрываются.
Поскольку аккордеон своей работой напоминает вкладки, то мы можем использовать тот же самый код HTML, что и при создании вкладок (пример 1). Для первого типа аккордеона вставляем <input type="radio">, который позволяет выбрать лишь один пункт, а для второго типа <input type="checkbox"> — с его помощью можно раскрывать и закрывать произвольное число пунктов.
Пример 1. Код отдельного пункта аккордеона
<div class="tab">
<input type="radio" id="tab1" name="tab-group">
<label for="tab1" class="tab-title">Заголовок пункта</label>
<section class="tab-content">Содержимое</section>
</div>
Не забудьте, что для каждого <input> надо добавить своей уникальный id, а его значение затем вставить в атрибут for у расположенного ниже элемента <label>.
Алгоритм создания аккордеона повторяет шаги при создании вкладок. Сперва мы прячем <input> и содержимое через свойство display со значением none.
.tab input, .tab-content { display: none; }
Затем с помощью псевдокласса :checked показываем содержимое, задавая свойству display значение block.
:checked ~ tab-content { display: block; }
Для разнообразия справа от заголовка добавим символ плюса, он будет показывать пользователю что пункт раскрывается; при открытии пункта символ плюса меняем на минус. Оба действия делаются через псевдоэлемент ::after и свойство content, в значении которого пишем текст. При желании плюс и минус можно поменять на что-то другое, к примеру, на стрелки.
.tab-title::after { content: '+'; }
:checked + .tab-title::after { content: '−'; }
Чтобы пользователь понимал, что на пункты списка можно щёлкать, изменим вид курсора на «руку» при наведении на заголовок.
.tab-title { cursor: pointer; }
В примере 2 показан набор вопросов и ответов в виде аккордеона. В свёрнутом состоянии всё это выглядит компактно, каждый вопрос можно разворачивать и сворачивать.
Пример 2. Создание аккордеона
Решение с использованием псевдокласса :checked получается достаточно гибким и легко настраиваемым под свои нужды. Так, можно заранее сделать отдельные пункты открытими, добавив к <input> атрибут checked. Если требуется поменять поведение аккордеона, чтобы открытым был только один пункт, то нужно поменять значение атрибута type на radio. Сам CSS остаётся исходным и какие-либо правки вносить в него не понадобится.
См. также
- <label>
- content
- quotes
- relative и absolute
- Вкладки на CSS
- Выпадающее меню
- Добавление тени
- Использование :checked
- Не только текст
- Очистка float
- Подробнее о позиционировании
- Подсказка в поле формы
- Пользовательские формы
- Псевдокласс :checked
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Спойлер
- Стилизация переключателей
- Стилизация флажков
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label