Аккордеон (Accordion)

Аккордеон (Accordion) в веб-дизайне и UI/UX — это интерактивный элемент интерфейса, состоящий из вертикального стека заголовков, которые при клике разворачиваются, отображая скрытый контент, или сворачиваются для экономии экранного пространства.

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

Анатомия UI-компонента

Заголовок секции (Header): постоянно видимая текстовая строка, которая кратко описывает скрытое внутри содержимое. Служит кнопкой-триггером.
Иконка-индикатор (Chevron / Плюс): графический маркер (чаще всего стрелочка-шеврон или знак +), который меняет свое направление или форму в зависимости от того, открыта вкладка или закрыта.
Панель контента (Content Panel): скрытый блок с текстом, списками, изображениями или другими элементами управления, который «выезжает» при клике на заголовок.
Разделитель (Divider): тонкая линия, визуально отсекающая одну логическую секцию аккордеона от другой.

Главные преимущества использования

Прогрессивное раскрытие (Progressive Disclosure): сложная или объемная информация выдается пользователю порционно. Это снижает когнитивную нагрузку и не пугает перегруженным экраном.
Экономия места на мобильных (Mobile Friendly): на экранах смартфонов аккордеон незаменим. Он избавляет пользователя от необходимости бесконечно скроллить длинную страницу вниз.
Улучшенная навигация: пользователь может быстро пробежаться глазами по заголовкам, понять общую структуру раздела и открыть только то, что ему действительно интересно.