кастомный аккордеон на zero-блоках

[ студия веб-дизайна SHEINA ]

Время чтения: 3 мин.

Содержание

Как выглядит кастомный аккордеон из zero блоков на tilda
Как сделать кастомный аккордеон из zero блоков на Tilda: пошаговая инструкция
Нужна помощь с кастомным аккордеоном на zero-блоках?
FAQ частые вопросы

Иногда нужно больше, чем просто текст с плюсиком. Например — добавить анимации, встроить полноценные блоки, управлять внешним видом и поведением секций. В таких случаях подойдёт кастомный аккордеон, собранный на Zero-блоках с помощью HTML, CSS и JS.

В этой статье показываем, как вручную собрать полноценный кастомный аккордеон на Tilda, адаптированный под ваш дизайн. Без ограничений по структуре: можно вставлять галереи, формы, таблицы, изображения, и всё это — с гибкой логикой раскрытия.

Как выглядит кастомный аккордеон из zero-блоков на tilda

Лендинг на Tilda

4–6 дней

Создаём сайты на Тильде, которые работают на задачу. Мы проектируем сайты с нуля: от идеи и структуры до дизайна и запуска. В работе используем гибкость платформы Tilda — и усиливаем её кастомной версткой, если нужно.

Каждый проект мы ведём как проводники: помогаем пройти путь от замысла до живого сайта, вникая в суть бизнеса и предлагая не шаблон, а решение. Результат — сайт, который не только красиво выглядит, но и действительно удобен для пользователя, отвечает целям проекта и легко масштабируется.

Лендинг на Tilda

4–6 дней

Создаём сайты на Тильде, которые работают на задачу. Мы проектируем сайты с нуля: от идеи и структуры до дизайна и запуска. В работе используем гибкость платформы Tilda — и усиливаем её кастомной версткой, если нужно.

Каждый проект мы ведём как проводники: помогаем пройти путь от замысла до живого сайта, вникая в суть бизнеса и предлагая не шаблон, а решение. Результат — сайт, который не только красиво выглядит, но и действительно удобен для пользователя, отвечает целям проекта и легко масштабируется.

Лендинг на Tilda

4–6 дней

Создаём сайты на Тильде, которые работают на задачу. Мы проектируем сайты с нуля: от идеи и структуры до дизайна и запуска. В работе используем гибкость платформы 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 разрабатывает такие решения под конкретные задачи: аккуратное поведение в мобильной версии, плавные анимации, понятная логика взаимодействия и чистый код без лишних библиотек.