🔷 Блок: Accordion / Аккордеон

📌 Что это
Accordion — это блок Gutenberg для создания раскрывающихся секций.
То есть на странице виден заголовок, а содержимое скрыто.
Пользователь нажимает на заголовок — блок раскрывается.
Нажимает снова — блок закрывается.
Например:
FAQ / Частые вопросы;
расписание;
тарифы;
условия услуги;
инструкции;
характеристики товара;
длинные объяснения, которые не хочется сразу показывать целиком.
Accordion помогает сделать страницу короче и аккуратнее.
⚙️ Функции
Блок позволяет:
добавлять несколько раскрывающихся пунктов;
редактировать заголовок каждого пункта;
добавлять внутрь пункта текст, списки, изображения и другие блоки;
менять порядок пунктов;
открывать или закрывать пункты во время редактирования;
настраивать, будет ли пункт открыт по умолчанию;
включать режим auto-close, когда при открытии одного пункта остальные закрываются;
показывать или скрывать иконку раскрытия;
выбирать положение иконки слева или справа;
настраивать цвета, типографику, отступы, рамки, если тема это поддерживает;
добавлять CSS-класс в Advanced.
В официальной документации WordPress Accordion описан как блок для collapsible sections: каждый Accordion состоит из Accordion Item, а внутри пункта есть заголовок и раскрывающаяся панель с контентом.
🎯 Зачем нужен
Чтобы спрятать дополнительную информацию и не перегружать страницу.
Например:
пользователь видит только список вопросов;
нажимает на нужный вопрос;
получает ответ;
остальные ответы не мешают просмотру.
Это удобно, когда информации много, но не вся она нужна сразу.
📍 Где используется чаще всего
FAQ / Частые вопросы;
страницы услуг;
страницы товаров;
лендинги;
прайс-листы;
обучающие страницы;
документация;
инструкции;
страницы поддержки;
условия доставки и оплаты.
⚠️ Важно
Accordion лучше использовать, когда у тебя есть несколько связанных раскрывающихся пунктов.
Например:
Accordion
├─ Сколько стоит услуга?
├─ Как проходит оплата?
├─ Сколько занимает работа?
└─ Как с вами связаться?
Если нужен только один раскрывающийся блок, часто проще использовать блок:
Details / Детали
То есть:
один раскрывающийся пункт → Details
несколько раскрывающихся пунктов вместе → Accordion
В документации WordPress это различие тоже указано: Details создаёт одну раскрывающуюся секцию, а Accordion — список связанных раскрывающихся пунктов.
⚠️ Не перегружай Accordion
Не стоит прятать в Accordion вообще всё.
Плохо:
весь главный текст страницы спрятан;
важная информация скрыта;
пользователь должен постоянно кликать, чтобы понять страницу.
Хорошо:
основная информация видна сразу;
дополнительные детали спрятаны в Accordion;
заголовки короткие и понятные.
⚠️ Заголовки должны быть ясными
Пользователь должен сразу понимать, что откроется после клика.
⚠️ Тема может влиять
Внешний вид Accordion может зависеть от темы.
Тема может влиять на:
цвет заголовков;
размер шрифта;
иконки;
отступы;
рамки;
анимацию раскрытия;
доступные стили в правой панели.
Если в редакторе нет какой-то настройки, это не обязательно ошибка. Возможно, текущая тема её не поддерживает.
🧠 Простыми словами
Accordion — это блок “нажал — открылось, нажал — закрылось”.
Он нужен, чтобы аккуратно показать много информации, не растягивая страницу.
Чаще всего используется для FAQ, инструкций и дополнительных деталей.
