Accordion

Общая информация

Аккордеон — это паттерн раскрытия и скрытия разделов контента. Постепенное раскрытие контента обеспечивает экономию пространства на странице.

Анатомия

Заголовок
Кнопка-иконка. Отвечает за сворачивание / разворачивание контентной области
Контентная область

Описание работы

Поведение

Несколько слоёв накладываются друг на друга. Все они скрыты, видны только их заголовки. Если одно из них нажато, чтобы сделать его активным, оно раскрывается. Другие окна в аккордеоне располагаются по верхнему или нижнему краю.

Должно быть настраиваемым поведение аккордионов при раскрытии нескольких:

Стандартное — при открытии нового, предыдущее закрывается.
Многоуровневое — при открытии нового, все открытые перед ним остаются в том же состоянии.

Размещение

Аккордеоны можно размещать: внутри контейнера с содержимым (например, виджет, sidebar)

представлять собой отдельный контейнер (с динамической высотой)

Заголовок

Рекомендуется использовать в качестве содержимого заголовка статичный контент (без интерактивности). В таком случае у пользователя не будет противоречий в интерактивности компонента (аккордеон может раскрываться по клику на всю строку-заголовок).

Однако, есть задачи, которые требуют наличия интерактивных компонентов внутри заголовка аккордеона. В таких случаях зона клика определяется правилами используемого компонента:

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

Интерактивность

Раскрытие аккордеона осуществляется по клику на строку-заголовок или на кнопку-шеврон. Зона клика в строке заголовка:

В случае наличия большого количества управляющих элементов, раскрытие и скрытие аккордеона осуществляется по клику на иконку шеврона справа, которая указывает, в каком состоянии находится аккордеон:

шеврон указывает вниз - аккордеон свернут
вверх - развернут.

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

Когда использовать

Для систематизации связанной информации
Для уменьшения прокрутки области, когда видимость всего контента не принципиальна
Когда длинный контент не может быть отображен сразу весь (например, в мобильном интерфейсе или на боковой панели)
Когда нужно расположить много информации на одном экране. В этом случае, рекомендуется для уменьшения информационной перегрузки отображать только одно окно раскрытым
При пошаговом заполнении экрана

Не используйте аккордеон, если необходимо, чтобы пользователь увидел весь контент - это увеличит нагрузку за счет необходимости сворачивать / разворачивать разделы. Вместо этого используйте полную прокручиваемую страницу с обычными заголовками.