Иногда нужно больше, чем просто текст с плюсиком. Например — добавить анимации, встроить полноценные блоки, управлять внешним видом и поведением секций. В таких случаях подойдёт кастомный аккордеон, собранный на Zero-блоках с помощью HTML, CSS и JS.
В этой статье показываем, как вручную собрать полноценный кастомный аккордеон на Tilda, адаптированный под ваш дизайн. Без ограничений по структуре: можно вставлять галереи, формы, таблицы, изображения, и всё это — с гибкой логикой раскрытия.
Как выглядит кастомный аккордеон из zero-блоков на tilda
Как сделать кастомный аккордеон из zero блоков на Tilda: пошаговая инструкция
Добавляем Zero блок и наполняем его. Это будет плашка аккордеона.
1. Стрелке добавляем класс .uc-accord-arrow
2. Поверх всего контента добавляем кнопку, убираем с нее текст, делаем так, чтобы она полностью покрывала блок, при нажатии на нее у нас будет раскрываться карточка. Можно ей также добавить поведение при наведении. Задаем ей класс: .uc-accord-open
3. Всей карточке аккордеона задаем класс .uc-accord-card-1
4. Ниже добавляем еще один zero блок и наполняем его контентом, которые будет отображаться при раскрытии карточки). Задаем этому блоку с контентом класс, такой же как карточке аккордеона, к которому она относится: .uc-accord-card-1
5. Ниже копируем и вставляем нужное количество карточек аккордеона и контента для них. Классы им задаем соответствующие: для второй карточки и его контента — .uc-accord-card-2, для третьей и ее контента — .uc-accord-card-3 и т. д.
Не забудьте добавить немного отступа сверху в zero-блоках для карточек аккордеона. Иначе они будут у вас все слипшиеся. Друг под другом, без просветов. Достаточно 2−5px.
6. Добавляем код под блоками для аккордеона
<script>
$(document).ready(function () {
$('[class*="uc-accord-card-"]').each(function () {
const $block = $(this);
if ($block.find('.uc-accord-open').length === 0) {
$block.hide().removeClass('active-accord');
}
});
$('.uc-accord-open').on('click', function () {
const $clicked = $(this);
const $card = $clicked.closest('[class*="uc-accord-card-"]');
if ($card.length === 0) return;
const classList = $card.attr('class').split(/\s+/);
const accordClass = classList.find(cls => cls.startsWith('uc-accord-card-'));
if (!accordClass) return;
const $allSameClass = $('.' + accordClass);
const $triggerBlock = $allSameClass.has($clicked);
const $contentBlock = $allSameClass.not($triggerBlock);
const isOpen = $contentBlock.hasClass('active-accord');
if (isOpen) {
$contentBlock.removeClass('active-accord').slideUp(300);
$triggerBlock.find('.uc-accord-arrow').removeClass('rotated');
} else {
$contentBlock.addClass('active-accord').slideDown(300);
$triggerBlock.find('.uc-accord-arrow').addClass('rotated');
}
});
});
</script>
<style>
.uc-accord-arrow {
transition: transform 0.3s ease;
}
.uc-accord-arrow.rotated {
transform: rotate(90deg);
}
.uc-accord-open {
cursor: pointer;
}
</style>
Нужна помощь с кастомным аккордеоном на zero-блоках?
Кастомный аккордеон, собранный полностью на Zero‑блоках, — это гибкое решение для проектов, где стандартных инструментов Tilda уже не хватает. Такой аккордеон создаётся вручную: каждая плашка, стрелка и логика раскрытия настраиваются через Zero, а поведение управляется чистым кодом.
Это даёт полную свободу в дизайне: можно встроить внутри любые элементы — тексты, изображения, формы, видео, Zero‑секции или даже целые модули сайта. Аккордеон органично вписывается в структуру страницы, не конфликтует с автоскейлом, и при этом остаётся управляемым и лёгким для редактирования.
Студия SHEINA разрабатывает такие решения под конкретные задачи: аккуратное поведение в мобильной версии, плавные анимации, понятная логика взаимодействия и чистый код без лишних библиотек.
FAQ Частые вопросы
Чем кастомный аккордеон на Zero отличается от стандартного аккордеона в Tilda?
В кастомном варианте нет ограничений по структуре и дизайну. Всё создаётся вручную: можно менять поведение, скорость анимации, внешний вид стрелок, форму плашек, добавлять внутри полноценные Zero‑блоки и управлять логикой через JavaScript.
Можно ли добавить в кастомный аккордеон сложный контент — галереи, формы, таблицы или видео?
Да. В отличие от стандартных решений, кастомный аккордеон на Zero поддерживает любой тип контента: от текстовых блоков до сложных Zero‑сборок с анимацией и формами обратной связи. Всё это раскрывается без перезагрузки и корректно работает на мобильных устройствах.
Подходит ли кастомный аккордеон для адаптивных сайтов на Tilda
Полностью. Поведение задаётся кодом, а значит можно точно контролировать масштабирование, высоту, плавность раскрытия и адаптацию под разные экраны. Такой аккордеон не ломает вёрстку, не зависает и корректно реагирует на касания на телефонах.
Читать больше полезной информации: https://sheina-studio.ru/blog