Как сделать аккордеон в тильде в зеро блоке

Аккордеон в Zero-блоке

Карточки с раскрывающимся текстом — так это называется в Тильде. Ну, а для всех остальных — это аккордеон.

TX16N: Текст в раскрывающихся карточках
TX16N2: Текст в раскрывающихся карточках на цветном фоне
SV501: Текст в раскрывающихся карточках

Добавьте один из блоков с аккордеоном (TX16N / TX16N2 / SV501) на страницу.
Уберите заголовок и описание из шапки блока, если используете SV501.
Уберите отступы сверху и снизу у блока, а также фон, если он задан (у вас применится фон Zero-блока).
Создайте Зеро-блок, добавьте в него HTML-элемент, а внутри напишите: .
Впишите в настройки ниже ID блоков.
Скопируйте полученный код и вставьте его в блок T123. Сам блок разместите под вашими элементами (Zero-блоком и аккордеоном) или в самом низу страницы.

 script> const zeroWithAccordionArtboard = document.querySelector('#rec123456789 .t396__artboard'); zeroWithAccordionArtboard.addEventListener('artBoardRendered', () => < let accordionZero = document.getElementById('zero-accordion'); accordionZero.appendChild(document.querySelector('#rec234567890')); accordionZero.querySelectorAll('.t-col').forEach(col => (col.style.marginLeft = '0', col.style.marginRight = '0')); accordionZero.querySelectorAll('button').forEach(button => < button.addEventListener('click', (e) => < const zeroArtboardHeight = zeroWithAccordionArtboard.offsetHeight; const zeroFilter = zeroWithAccordionArtboard.querySelector('.t396__filter'); const zeroCarrier = zeroWithAccordionArtboard.querySelector('.t396__carrier'); const accordionHeight = accordionZero.offsetHeight; const interval = setInterval(() => < const heightText = Math.floor(zeroArtboardHeight + accordionZero.offsetHeight - accordionHeight) + 'px'; zeroWithAccordionArtboard.style.height = heightText; zeroFilter.style.height = heightText; zeroCarrier.style.height = heightText; zeroWithAccordionArtboard.style.minHeight = heightText; zeroFilter.style.minHeight = heightText; zeroCarrier.style.minHeight = heightText; >, 16); setTimeout(() => < clearInterval(interval) >, 400); >); >); >); script>

Пример работы модификации
Этот аккордеон находится внутри Zero-блока

На сайте «Некодим» есть несколько типов подписок. На данный момент (21.03.2023) их две: «Бета-тестер» и «Разработчик».

Обе подписки дают доступ к платным модификациям. Однако первая («Бета-тестер») даёт доступ только к модификациям, которые станут бесплатными через месяц после создания, а «Разработчик» открывает доступ ко всем модификациям.

Сначала бесплатные модификации становятся доступны только подписчикам. Если вы хотите получить фукнционал бесплатной модификации, которая только что появилась, или просто хотите поддержать проект «Некодим» минимальной суммой, то можете подписаться на «Бета-тестер».

Как сделать аккордеон из Zero Block на Tilda?

При помощи данной модификации можно соединить несколько Zero Block в аккордеон. Дополнительно можно настроить количество одновременно открытых вкладок, включить скролл до открытой вкладки и многое другое. Гармошка на Zero Block работает плавно и легко дублируется в рамках одной страницы.

Генератор кода

Класс для кнопки аккордеона
Номер открытой вкладки при загрузке
Скролл до открытой вкладки
Открывать только по одной вкладке
Градус поворота иконки
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
КОПИРОВАТЬ КОД

Инструкция
Пример

Читать:

Как сливать солярку через обратку на камазе

1. Создаем первый Zero Block в котором размещаем кнопку(вместо кнопки можно использовать текст, шейп, картинку) и назначаем класс ti-accord
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка «Add CSS Class Name» и далее, справа в настройках указываем класс

Если нужна иконка которая будет поворачиваться при открытой гармошке, то создаем элемент(картинку или шейп) и назначаем класс ti-icon

2. Создаем второй Zero Block и размещаем контент, который будет показываться при клике на кнопку. Zero Block назначаем класс uc-ti-content
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка «Добавить CSS Class Name»

3. Дублируем наши два блока столько раз сколько гармошек нам нужно.

4. Переходим в генератор кода и указываем дополнительные настройки:
Номер открытой вкладки при загрузке — указываем вкладку которая будет открыта сразу при загрузке страницы. Счет начинается с 0. Поэтому чтобы была открытая первая вкладка нужно указать 0, чтобы вторая указываем 1 и т. д. Если не нужно открывать вкладку, то указываем -1
Скролл до открытой вкладки — при включённой опции будет скролить до открытой вкладки. Чтобы скролл был плавный, добавляем на страницу блок Т178.
Открывать только по одной вкладке — при включённой опции, одновременно может быть открыта только одна вкладка. При открывании новой вкладки, старая автоматически закрывается.
Градус поворота иконки — указываем градус поворота иконки. Будет работать только если добавили иконку и присвоили ей класс ti-icon.

5. Копируем готовый код и вставляем в HTML блок Т123.

Примечание: если вам нужно создать две независимых гармошки в рамках одной страницы, то генерируем два кода с уникальными классами кнопок.

Одна кнопка может открывать больше одного блока. Достаточно после блока с кнопкой создать два или больше Zero Block с классом uc-ti-content

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

Скрипт не работает с включенным Автоскейлом!

Аккордеон со своей иконкой в Тильде

Добавим блок из стандартной библиотеки TX16N, затем добавим на страницу блок Т123 и добавим в него код, заменив класс элемента иконки.

Инструкция:
Код эффекта

Пример реализации:

Our managers are always ready to answer your questions. You can call us at the weekends and at night. Also you can visit our office for personal consultation.

Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.

Раскрывающиеся карточки в стиле macOS на Tilda

Недавно делал промо страницу, идея была стилизовать блоки под виджеты macOS и iOS, вроде получилось, итог можете посмотреть тут. Хотел добавить блок аккордеон для FAQ, но заказчик от него отказался, решил опубликовать код тут, может кому понадобится. Код под примером, он достаточно простой, нужно только заменить id блока. Видео внизу.

Как сделать блок в стиле macOS на Tilda ?

Пример

High Quality

We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.

Good Support