URL скопирован в буфер обмена!

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

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

Модификация обновлена. Добавлена поддержка автоскейл. Исправлена ошибка неправильного скролла при открытии вкладки.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

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

Класс для кнопки аккордеона
Номер открытой вкладки при загрузке
Скролл до открытой вкладки
Открывать только по одной вкладке
Градус поворота иконки
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD052--><style> .ti-accord { cursor: pointer; } .ti-icon { transition: transform 0.4s ease-in-out; } .uc-ti-content { max-height: 0; overflow: hidden; pointer-events: none; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } .uc-ti-content.open { max-height: none; opacity: 1; pointer-events: auto; } </style> <script> $(window).on('load', function() { let TiCodeSolo = true; let TiCodeDefault = 0; let tabs = $('.ti-accord'); tabs.each(function(index, element) { let $parentR = $(this).closest('.r'); let $nextR = $parentR.nextAll('.r:not(.uc-ti-content)').first(); let content = $parentR.nextUntil($nextR, '.uc-ti-content'); let icon = $parentR.find('.ti-icon'); content.css('overflow', 'hidden'); if (index !== TiCodeDefault) { content.css('max-height', 0); content.css('pointer-events', 'none'); } else { content.addClass('open'); $parentR.addClass('active'); setTimeout(() => { content.css('max-height', content[0].scrollHeight); }, 0); icon.css('transform', 'rotate(180deg)'); } }); tabs.click(function() { let $parentR = $(this).closest('.r'); let $nextR = $parentR.nextAll('.r:not(.uc-ti-content)').first(); let content = $parentR.nextUntil($nextR, '.uc-ti-content'); let icon = $parentR.find('.ti-icon'); content.css('overflow', 'hidden'); if ($parentR.hasClass('active')) { content.css('max-height', 0); content.css('pointer-events', 'none'); icon.css('transform', 'rotate(0deg)'); $parentR.removeClass('active'); } else { if (TiCodeSolo) { tabs.closest('.r.active').removeClass('active'); tabs.not(this).each(function() { let $otherParentR = $(this).closest('.r'); let $otherNextR = $otherParentR.nextAll('.r:not(.uc-ti-content)').first(); let otherContent = $otherParentR.nextUntil($otherNextR, '.uc-ti-content'); otherContent.css('max-height', 0); otherContent.css('pointer-events', 'none'); $otherParentR.find('.ti-icon').css('transform', 'rotate(0deg)'); }); } content.addClass('open'); icon.css('transform', 'rotate(180deg)'); setTimeout(() => { content.css('max-height', content[0].scrollHeight); content.css('pointer-events', 'auto'); $parentR.addClass('active'); }, 0); $parentR.addClass('active'); setTimeout(() => { $('html, body').animate({ scrollTop: $parentR.offset().top - 100 }, 500); }, 500); } }); }); </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
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

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

Скрипт не работает с включенным Автоскейлом!
Как часто выходят модиикации?
Мы стараемся регулярно обновлять библиотеку наших модификаций. Каждый месяц библиотека пополняться минимум на две модификации. Следить за выходом новых модификаций можно в нашем телеграм канале Там же вы можете посмотреть историю выхода прошлых модификаций и эффектов для Тильда.
Сможет ли мой "заказчик" редактировать модификацию самостоятельно?
Код в HTML блоках Т123 можно редактировать самостоятельно через кнопку "редактировать код". Или же можно воспользоваться повторно нашими генераторами кода. Это займет меньше времени и вашему заказчику не нужно самостоятельно разбираться в коде
Будут ли работать модификации после передачи проекта на другой аккаунт Tilda?
Все установленные модификации продолжат работать даже при передаче сайта на другой аккаунт Тильда.
Made on
Tilda