Кастомный аккордеон в Zero‑блоке

Позволяет создавать полностью кастомные аккордеоны внутри Zero-блока, задавать им уникальный дизайн, поведение и размещать карточки в несколько колонок

Классический аккордеон в Zero-блоке

Аккордеон с несколькими колонками

Дополнение

Аккордеон из отдельных Zero-блоков

Дополнение

Аккордеон из отдельных блоков

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Добавьте на страницу отдельные Zero-блоки для заголовочных секций (вкладок) и содержимого аккордеона

Они должны быть расположены в том же порядке, в котором должны идти карточки аккордеона. См. пример
Задайте блокам со вкладками класс .uc-accordion, а блокам с содержимым – класс .uc-accordion-block

Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion1-block .uc-accordion2, .uc-accordion2-block и т. д.
Присвойте элементам, при нажатии на которые будут раскрываться карточки аккордеона, класс .accordion-button

Если внутри вкладок есть иконки, которые должны переворачиваться и менять своё состояние при раскрытии, присвойте им класс. accordion-icon.
Задайте в настройках модификации стили и поведение аккордеона
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>accordion.init('.uc-accordion', { collapse: true, style: { icon: { backgroundColor: '#18181B', backgroundImage: 'https://static.postnikovmd.com/img/accordion-arrow-w.svg' } } })</script>

Открыть пример

Настройки модификации

Скорость и тип переходов:

Класс аккордеона:

+ Настройки аккордеона

Раскрывать карточки по ховеру

Перемещаться к раскрытой карточке

Оставлять раскрытой только одну карточку

Аккордеон

+ Настройки стилей

Иконки

Цвет фона активной иконки

Бордер активной иконки

Изображение активной иконки

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

<!--accordion.js Аккордеон из отдельных блоков. https://postnikovmd.com/mods/accordion/default-->
<script>accordion.init(".uc-accordion")</script>

Скопировать код

Особенности

Работает внутри Zero-блока

Автоматически подстраивает высоту блока в зависимости от контента
Поддерживает автолэйауты

Аккордеон работает, даже если блок сделан полностью в Auto Layout
Имеет активное состояние

Можно задать свои стили для активного состояния карточек