> For the complete documentation index, see [llms.txt](https://prizmds.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prizmds.gitbook.io/documentation/components/accordion.md).
# Accordion
## Общая информация
Аккордеон — это паттерн раскрытия и скрытия разделов контента. Постепенное раскрытие контента обеспечивает экономию пространства на странице.
## Анатомия
1. **Заголовок**
2. **Кнопка-иконка.** Отвечает за сворачивание / разворачивание контентной области
3. **Контентная область**
## Описание работы
### Поведение
Несколько слоёв накладываются друг на друга. Все они скрыты, видны только их заголовки. Если одно из них нажато, чтобы сделать его активным, оно раскрывается. Другие окна в аккордеоне располагаются по верхнему или нижнему краю.
Должно быть настраиваемым поведение аккордионов при раскрытии нескольких:
* Стандартное — при открытии нового, предыдущее закрывается.
* Многоуровневое — при открытии нового, все открытые перед ним остаются в том же состоянии.
### Размещение
* Аккордеоны можно размещать: внутри контейнера с содержимым (например, виджет, sidebar)
* представлять собой отдельный контейнер (с динамической высотой)
### Заголовок
Рекомендуется использовать в качестве содержимого заголовка статичный контент (без интерактивности). В таком случае у пользователя не будет противоречий в интерактивности компонента (аккордеон может раскрываться по клику на всю строку-заголовок).
Однако, есть задачи, которые требуют наличия интерактивных компонентов внутри заголовка аккордеона. В таких случаях зона клика определяется правилами используемого компонента:
Заголовок аккордеона должен быть понятен пользователю и давать представление о том, какая информация содержится внутри.
### Интерактивность
Раскрытие аккордеона осуществляется по клику на строку-заголовок или на кнопку-шеврон. Зона клика в строке заголовка:
В случае наличия большого количества управляющих элементов, раскрытие и скрытие аккордеона осуществляется по клику на иконку шеврона справа, которая указывает, в каком состоянии находится аккордеон:
* шеврон указывает вниз - аккордеон свернут
* вверх - развернут.
Аккордеоны по умолчанию находятся в свернутом состоянии с закрытыми контентными областями. Затем пользователь может раскрывать каждую секцию аккордеона отдельно. Одновременно могут быть открыты несколько секций.
{% tabs %}
{% tab title="Свернутый" %}
{% endtab %}
{% tab title="Развернутый" %}
{% endtab %}
{% endtabs %}
### Когда использовать
* Для систематизации связанной информации
* Для уменьшения прокрутки области, когда видимость всего контента не принципиальна
* Когда длинный контент не может быть отображен сразу весь (например, в мобильном интерфейсе или на боковой панели)
* Когда нужно расположить много информации на одном экране. В этом случае, рекомендуется для уменьшения информационной перегрузки отображать только одно окно раскрытым
* При пошаговом заполнении экрана
Не используйте аккордеон, если необходимо, чтобы пользователь увидел весь контент - это увеличит нагрузку за счет необходимости сворачивать / разворачивать разделы. Вместо этого используйте полную прокручиваемую страницу с обычными заголовками.
## Размеры
Размеры и отступы могут меняться в зависимости от типа использумой сетки. Сетка может быть с 8 или 12 колонками.
Высота аккордеона может варьироваться в зависимости от решаемой задачи. Кратность высоты и ширины аккордеона - 8 рх.
