Tildify Elements

Аккордеон для Zero Block

Универсальный аккордеон для Tilda ZeroBlock.
Режим одной открытой карточки и нескольких. Возможность свернуть все. Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров. Горизонтальный аккордеон.

Поддержка импорта и автогенерации аккордеона из вашего дизайна в Figma при использовании плагина Tildify Validator

Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Для использования элементов в Tilda ZeroBlock необходимо установить расширение для Google Chrome Tildify, если нужен импорт из Figma также потребуется плагин для Figma Tildify Validator
Для работы библиотеки необходима платная подписка Tilda, так как в бесплатной недоступно использование скриптов
Ниже приведены примеры аккордеонов. Вы можете использовать ZeroBlock id для импорта в ваш проект примера аккордеона, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Гибкая настройка контролов
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
Аккордион на базе обычных групп
Автовысота ZeroBlock
Несколько открытых карточек
Настройка цвета фона активной секции
Компоновка за счет визуальной позици
ZeroBlock id:
i9whiw8vhdr2st1mmfen
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с настраиваемыми заголовками
Автовысота ZeroBlock
Настройка цвета разделителя
Гибкая настройка контролов
Гибкая настройка состояния заголовка
ZeroBlock id:
oi805mmvu6r6v86bentl
1
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
3
Заголовок
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Вложенные элементы
ZeroBlock id:
tdqu4e355qodsz2jnxoho
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Горизонтальный аккордеон
Одна открытая карточка
Вложенные элементы
В мобайле вертикальный
ZeroBlock id:
y48j372jmwbtezriqkbd5d
1
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
2
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
3
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Скрипт аккордеона
id: 1
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 3
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 4
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Вложенное меню на базе аккордеонов
Вложенные аккордеоны
Горизонтальный и вертикальный
ZeroBlock id:
67055xw9xsnaftfydlti8h
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.

Присоединяйтесь!
Инструкция для Аккордеона
Сборка своего аккордеона в Тильде
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
  1. Создайте секции аккордеона: для каждой секции объедините заголовок и контент в отдельные группы типа Object.
  2. Заголовку секции задайте класс tf_accordion-header.
  3. Контенту секции задайте класс tf_accordion-content.
  4. При желании можно дополнительно объединить заголовок и контент одной секции в общую группу. Это позволяет задать общий фон для секции для неактивного (за счет дизайна) и активного (в настройках аккордеона) состояния.
  5. Объедините все секции в одну общую группу типа Object, задайте ей свойство Autolayout (не обязательно )и присвойте класс tf_accordion.
  6. Настроив направление Autolayout, можно сделать вертикальный или горизонтальный аккордеон. Горизонтальный аккордеон работает только с flex-структурой.
  7. Внутри заголовка можно размещать любые элементы: текст, иконки, кнопки, номера, декоративные элементы. Кнопки будут менять свой стиль на Hover при открытой вкладке.
  8. Если хотите явно задать кнопку или иконку раскрытия, можно использовать классы tf_accordion-button и tf_accordion-icon. Если не задавать их явно, аккордеон постарается определить нужные элементы автоматически.
  9. Внутри tf_accordion-content можно размещать любой контент: текст, карточки, кнопки, вложенные группы, а также вложенные слайдеры и вложенные аккордеоны.
  10. Если в одном ZeroBlock больше чем один аккордеон, последующим аккордеонам задавайте имя: tf_accordion-1. Для второго/третьего аккордеона: tf_accordion-2, tf_accordion-3 и т.д.
  11. Разместите конфиг аккордеона, добавив его из меню элементов ZeroBlock выбрав пункт TIldify Elements (должно быть установлено расширение для браузера Tildify).
  12. Настройте параметры аккордеона в HTML-блоке, или выделите HTML-блок и нажмите кнопку настроек аккордеона в боковом меню Tildify Elements, чтобы редактировать параметры через интерфейс настроек.
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements
Инструкция для Аккордеона
Сборка и экспорт аккордеона из Figma
Рекомендуется использовать сборку Слайдера, Аккордеона и Табов на основе автолэйаутов (flex-группы), для более стабильного поведения и контроля.
  1. Создай отдельную группу или фрейм для заголовка пункта.
  2. Создай отдельную группу или фрейм для контента этого же пункта.
  3. Если хочешь, чтобы у открытого пункта был свой цвет фона, дополнительно заверни такой контейнер в отдельную группу или фрейм.
  4. Собери все такие контейнеры в один общий контейнер аккордеона.
  5. На общий контейнер поставь тег [accordion].
  6. Теги [accordion-header] и [accordion-content] тоже можно поставить вручную, но это необязательно: при корректной структуре валидатор обычно назначает их сам.
  7. Если нужна стрелка, размести ее внутри заголовка и задай тег [accordion-arrow]. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку, в данном случае тег [accordion-arrow] можно не задавать.
  8. Лучше собирать общий контейнер, пары и внутренние блоки через AutoLayout, чтобы структура была ровной и проще редактировалась.
  9. Если на странице несколько аккордеонов, используй id, например [accordion|id=faq].
  10. Экспортируй аккордеон в Tilda. Плагин автоматически создаст управляющие скрипты для его работы.
  11. После импорта в Tilda используй панель Tildify Elements для настройки свойств аккордеона. Для этого выдели элементы аккордеона или конфиг аккордеона (блок с кодом и инструкцией), панель управления появится справа на панели настроек Zero Block.
Конфиг аккордеона появится над артбордом после импорта из Figma
Панель настроек Tildify Elements
Не смогли разобраться, есть предложения по улучшению или нашли ошибку?