Карточки аккордеона остаются развернутыми

Проблема возникает, когда в аккордеоне не совпадает количество вкладок и контента. Проверьте, что классы .accordion и .accordion-content заданы только группам с типом Object, а их количество совпадает.

После аккордеона остается пустое пространство

Проверьте, нет ли элементов ниже аккордеона, вынесенных за пределы блока, или отступов между карточками. Такие элементы могут влиять на расчет высоты блока.

Блок с аккордеоном обрезается

Убедитесь, что высота блока полностью вмещает весь аккордеон в раскрытом состоянии и в настройках Zero-блока не используется режим Hug.

Пропадает отступ между карточками аккордеона

Задайте нулевые отступы между карточками и регулируйте расстояние через параметр gap в коде инициализации.

Не работает иконка раскрытия

Если иконка некорректно обрезается или смещается при повороте, убедитесь, что она имеет квадратные пропорции. Изменение стилей активной иконки поддерживается только для элементов с типом Shape.

Карточки перемешиваются в случайном порядке

Данная проблема часто возникает, если вкладки и контент некорректно расположены в слоях или имеют отрицательные отступы. Для решения проблемы проверьте порядок элементов в слоях и выравнивание карточек по левому краю.

На странице работает только первый аккордеон

Такая проблема может возникнуть, если внутри блоков с другими аккордеонами изменены классы элементов. Для нескольких аккордеонов менять нужно только класс блока, а внутренние классы сохранять одинаковыми.

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению.

Время настройки: 5 минут

Кастомный аккордеон в Zero‑блоке

Позволяет создавать полностью кастомные аккордеоны внутри Zero-блока, задавать им уникальный дизайн, поведение и размещать карточки в несколько колонок

Классический аккордеон в Zero-блоке

Аккордеон с несколькими колонками

Дополнение

Аккордеон из отдельных Zero-блоков

Дополнение

Аккордеон с несколькими колонками

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>

Создайте Zero-блок и добавьте в него карточки аккордеона в раскрытом состоянии

Они могут состоять из любого количества элементов и быть расположены в несколько колонок в любом месте внутри Zero-блока. Каждая карточка должна иметь заголовочную секцию (вкладку) и её содержимое. См. пример
Задайте блоку с аккордеоном класс .uc-accordion

Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion2 и т. д.
Как задать класс блокам/элементам?
Объедините каждую вкладку и её содержимое в отдельные группы и задайте им тип Object

Количество групп со вкладками и содержимым должно совпадать, а карточки — плотно прилегать друг к другу. Чтобы расширить границы карточки, можно добавить прозрачный шейп или подложку. См. пример.
Как создать группу Object?
Присвойте группам со вкладками класс .accordion, а их содержимому — .accordion-content

Если в заголовочной секции должна быть иконка, которая будет поворачиваться при раскрытии, добавьте её как шейп с фоновым изображением и присвойте класс .accordion-icon.
Расположите карточки в слоях в порядке возрастания

Первой карточке должен соответствовать самый нижний по расположению слой, а каждой следующей — на уровень выше. Первой группе с заголовочной секцией будет соответствовать первая группа с её содержимым. См. пример
Задайте в настройках модификации стили и поведение аккордеона
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>accordion.init('.uc-accordion', { style: { active: { backgroundColor: '#F8F7FA', borderColor: '#F3F2F7', borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: '#18181B', backgroundImage: 'https://static.postnikovmd.com/img/accordion-arrow-w.svg' } } })</script>

Открыть пример

Настройки модификации

Скорость и тип переходов:

Класс аккордеона:

+ Настройки аккордеона

Раскрывать карточки по ховеру

Перемещаться к раскрытой карточке

Оставлять раскрытой только одну карточку

Аккордеон

+ Настройки стилей

Иконки

Цвет фона активной иконки

Бордер активной иконки

Изображение активной иконки

Карточки

Цвет фона активной карточки

Бордер активной карточки

Радиус скругления

Вертикальный отступ

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

С помощью этого параметра вы можете задать вертикальный отступ между карточками аккордеона

<!--accordion.js Аккордеон в Zero-блоке. https://postnikovmd.com/mods/accordion/multiple-->
<script>accordion.init(".uc-accordion")</script>

Скопировать код

Готовые шаблоны

pro

classic

Классический аккордеон

Пример кастомного аккордеона внутри одного Zero‑блока

Открыть пример

flex

Аккордеон с автолэйаутом

Аналог классического аккордеона, собранного с автолэйаутом

Открыть пример

card

Аккордеон в общей карточке

Пример аккордеона внутри общей карточки с подложкой/фоном

Открыть пример

dynamic

Аккордеон с доп. элементами

Аккордеон, под которым располагаются отдельные элементы

Открыть пример

popup

Аккордеон в поп-апе

Пример аккордеона, размещённого во всплывающем окне (pop-up)

Открыть пример

header

Аккордеон в хэдере и меню

Пример Zero-аккордеона внутри выпадающих меню и бургера

Открыть пример

window

Аккордеон по Window

Пример классического аккордеона, растянутого по всей ширине экрана

Открыть пример

multiple

Аккордеон в несколько колонок

Вариант аккордеона с расположением в несколько колонок

Открыть пример

default

Аккордеон из отдельных блоков

Пример аккордеона, собранного из нескольких Zero‑блоков

Открыть пример

hover

Аккордеон с ховер-эффектом

Пример аккордеона, в котором блоки раскрываются по наведению

Открыть пример

Документация

Элементы

Параметры

Распространенные проблемы

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

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

Элементы, нижняя граница которых располагается ниже, чем сам аккордеон, могут препятствовать его закрытию, так как учитываются при расчете минимальной высоты блока. Для решения проблемы добавьте им класс .tn-accordion-exclude, чтобы исключить их из логики обработки, или сделайте их размеры меньше.

В мобильных версиях есть элементы, вынесенные за пределы экрана

Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока.

Между вкладками, контентом или карточками есть отступы

При создании аккордеона модификация объединяет созданные группы во flex-контейнеры, которые не учитывают отступы, заданные в Тильде. Из-за этого карточки сдвигаются вверх, и в конце блока остается пустое пространство. Чтобы решить эту проблему, задайте нулевые отступы между карточками и регулируйте их через параметр gap в коде инициализации.

В настройках Zero-блока задана автовысота Hug

Данная настройка конфликтует с логикой изменения высоты аккордеона при его раскрытии. Установите фиксированную высоту артборда для решения данной проблемы.

Если блок обрезается, в большинстве случаев это связано с тем, что исходная высота блока оказывается меньше, чем сам аккордеон в раскрытом состоянии. В таком случае между аккордеоном и границами блока образуется отрицательный отступ, который сохраняется при дальнейшей работе аккордеона. Для исправления проблемы достаточно убедиться, что высота блока вмещает весь аккордеон в раскрытом состоянии.