Tildify
Elements

Аккордеон

Это универсальный аккордеон: его можно использовать для FAQ, тарифов, характеристик и любых блоков, где нужно раскрывать и скрывать контент по клику.

Как создать в ФигмеКак создать в Тильде
Примеры работы аккордеона
Почему это удобно
Если аккордеон правильно собран в Figma и размечен тегами, Tildify сам перенесет базовую механику в Tilda и подготовит структуру для дальнейшей настройки.
Подходит для FAQ, списков вопросов, тарифов, характеристик и любых блоков с раскрывающимся контентом.
Работает в режиме одного открытого пункта или нескольких открытых пунктов сразу.
Поддерживает стрелку, стартовые открытые пункты, плавную анимацию и прокрутку к открытому заголовку.
После добавления в Tilda параметры можно менять через удобную кнопку на панели Tildify Elements.
1. Подготовка к экспорту в Figma
Ниже самый понятный и надежный способ собрать аккордеон так, чтобы он корректно прошел валидацию и после импорта нормально работал в Tilda.
Для удобного нейминга тегов можно использовать Таггер.
Видеоинструкция: аккордеон из Figma
1

Создай отдельную группу или frame для заголовка пункта.

2

Создай отдельную группу или frame для контента этого же пункта.

3

Если хочешь, чтобы у открытого пункта был свой фон, цвет или другая подложка, дополнительно заверни такой контейнер в отдельную группу (фрейм).

4

Собери все такие контейнеры в один общий контейнер аккордеона.

5

На общий контейнер поставь тег [accordion].

6

Теги [accordion-header] и [accordion-content] тоже можно поставить вручную, но это необязательно: при корректной структуре валидатор обычно назначает их сам.

7

Если нужна стрелка, размести ее внутри заголовка и задай тег [accordion-arrow]. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку.

8

Лучше собирать общий контейнер, пары и внутренние блоки через AutoLayout, чтобы структура была ровной и проще редактировалась.

9

Если на странице несколько аккордеонов, используй id, например [accordion|id=faq].

10

Экспортируй аккордеон в Tilda. Плагин автоматически создаст управляющие скрипты для его работы.

Демо-файл в Figma
2. Как создать в Tilda
Если собираешь аккордеон вручную или хочешь проверить импортированный блок, ориентируйся на эту последовательность.
Видеоинструкция: аккордеон в Tilda
1

Создай отдельную группу типа Object для заголовка и задай ей класс tf_accordion-header.

2

Создай отдельную группу типа Object для контента и задай ей класс tf_accordion-content.

3

Объедини заголовок и контент в один общий контейнер пункта и расположи их друг под другом.

4

Если открытому пункту нужен свой фон, цвет или подложка, заверни такой контейнер в еще одну группу типа Object.

5

Собери все такие контейнеры в один общий контейнер и задай ему класс tf_accordion.

6

Если нужна стрелка, добавь ее в заголовок и задай ей класс tf_accordion-arrow. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку.

7

Если в одном Zero Block несколько аккордеонов, задай каждому root уникальный класс, например tf_accordion-1, tf_accordion-2 и так далее.

8

Добавь конфиг аккордеона через меню элементов Zero Block выбрав его из раздела Tildify Elements.

9

Если нужна ручная настройка параметров, выдели HTML-блок аккордеона или сам аккордеон и открой кнопку настроек на панели Tildify Elements.

3. Как это работает при импорте
Если структура собрана правильно, Tildify переносит базовую механику аккордеона автоматически.
Автоматически добавит нужные классы элементам аккордеона.
Автоматически добавит код аккордеона и JSON-конфиг в блок.
Если что-то собрано не так, debug-режим подскажет, что именно нужно поправить.
Умный дебагер
Если что-то не работает с первого раза, ориентируйся на умный дебагер. Он помогает быстро понять, где нарушена структура аккордеона и каких классов или связок не хватает.
Покажет, если внутри пункта не хватает заголовка или контента.
Подскажет, если пары header/content связаны неоднозначно или не найдены совсем.
Поможет быстро довести блок до правильной рабочей структуры.
4. Теги в Figma
[accordion]
Корневой контейнер
Ставится на общий контейнер аккордеона. Если аккордеонов несколько, используй id, например: [accordion|id=faq].
[accordion-header]
Заголовок пункта
Ставится на блок, по которому пользователь кликает для открытия. Если связываешь пару по id, пример: [accordion-header|id=payment].
[accordion-content]
Контент пункта
Ставится на раскрывающийся блок. Если связываешь пару по id, пример: [accordion-content|id=payment].
[accordion-arrow]
Стрелка
Необязательный тег для стрелки внутри заголовка. Нужен, если хочешь управлять поворотом иконки в открытом состоянии.
5. Классы в Tilda
tf_accordion
Корневой контейнер
Ставится на общий контейнер аккордеона. Если аккордеонов несколько, используй версию с id, например: tf_accordion-faq.
tf_accordion-header
Заголовок пункта
Ставится на контейнер заголовка. Если связываешь секцию по id, можно использовать формат tf_accordion-header-payment.
tf_accordion-content
Контент пункта
Ставится на контейнер контента. Если связываешь секцию по id, можно использовать формат tf_accordion-content-payment.
tf_accordion-arrow
Стрелка
Ставится на иконку или элемент стрелки внутри заголовка. Runtime сможет поворачивать ее в открытом состоянии.