Аккордеон меню

Аккордеон представляет собой список с раскрывающимся содержимым (рис. 1). Удобен для создания больших меню из-за компактности, а также для блоков вопросов и ответов. Название произошло от музыкального инструмента, который напоминает своим видом.

Рис. 1. Вид аккордеона

Есть два типа аккордеон-меню.

1. При раскрытии любого пункта списка открытое содержимое закрывается; по своему действию это похоже на вкладки.
2. Можно раскрывать любой пункт списка, остальные пункты при этом не закрываются.

Поскольку аккордеон своей работой напоминает вкладки, то мы можем использовать тот же самый код 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 остаётся исходным и какие-либо правки вносить в него не понадобится.