Модификация позволяет создавать полностью кастомные аккордеоны внутри Zero-блоков со своими стилями и поведением.
Как работает модификация
Общие механики
Аккордеон преобразует свёрстанные вкладки и контент в карточки и помещает их в общий контейнер с исходными размерами и позиционированием. В качестве вкладок и контента выступают группы Object с классом .accordion и .accordion-content.
Раскрытие и скрытие карточек осуществляется за счет добавления к ним класса .collapsed, который регулирует высоту видимого контента.
Изменение состояния карточек запускает автоматическое вычисление размеров аккордеона и регулирует высоту Zero-блока на их основе. При расчете также учитываются другие элементы в блоке, которые определяют его минимальную высоту, а элементы, располагающиеся ниже аккордеона, сдвигаются пропорционально изменению его размеров так, что отступ между ними и аккордеоном сохраняется постоянным.
Иконки раскрытия .accordion-icon располагаются во вкладках и привязываются к состоянию карточек, в которых они находятся. В генераторе кода им можно задать стили активного состояния.
Изменение размеров экрана перезапускает отрисовку аккордеона: он разбирается до первоначального состояния и собирается заново с учетом новых координат и настроек элементов.
Классический аккордеон в Zero-блоке
Аккордеон, в котором все вкладки и контент располагаются друг под другом в одном Zero-блоке. С его помощью можно создавать как обычные выпадающие списки, так и встраивать их в хэдер, меню, поп-апы и др.
Поддерживает вёрстку в автолэйауте (см. пример: Аккордеон с автолэйаутом)
Подробнее: Классический аккордеон в Zero-блоке
Аккордеон с несколькими колонками
Классический аккордеон, в котором вкладки и контент располагаются в несколько колонок. Модификация автоматически определяет их порядок (слева направо и сверху вниз), и создаёт несколько аккордеонов, связанных друг с другом.
Подробнее: Аккордеон с несколькими колонками
Аккордеон из отдельных Zero-блоков
Распространенный вариант аккордеона, в котором каждая вкладка и контент – отдельный блок, раскрывающийся по клику. Поддерживает как Zero, так и стандартные блоки, легко устанавливается, но ограничен по возможностям вёрстки.
Подробнее: Аккордеон из отдельных Zero-блоков
Начало работы
Установка библиотеки
Для работы аккордеона необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией слайдера. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоит аккордеон. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой аккордеона. Подгружаются асихнронно как функции объекта accordion.
В качестве аргументов для настройки аккордеона передаются следующие параметры:
Стили
В params.style можно также передавать стили аккордеона и его элементов. Они преобразовываются в css-переменные и отображаются при запуске мода.
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить аккордеон по срабатыванию события
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить аккордеон через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию слайдера можно с помощью параметров event и timeout. Например, запустить аккордеон через 100ms после срабатывания customEvent можно таким образом:
accordion.init(".uc-accordion", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки аккордеона
Если код нужно выполнить после того, как аккордеон полностью запустится, добавьте слушатель события accordioninit-id, где accordioninit – событие отрисовки аккордеона, id – класс блока с аккордеоном без префикса uc или rec. Например, если у блока со аккордеоном класс .uc-accordion1, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как аккордеон полностью запустится, добавьте слушатель события accordioninit-id, где accordioninit – событие отрисовки аккордеона, id – класс блока с аккордеоном без префикса uc или rec. Например, если у блока со аккордеоном класс .uc-accordion1, то слушатель события добавляется следующим образом:
window.addEventListener("accordioninit-accordion1", function(){ ... })Запустить другую модификацию после отрисовки аккордеона
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки аккордеона можно через событие accordioninit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки аккордеона можно через событие accordioninit:
popup.init(".uc-accordion", { event: "accordioninit-accordion" })Инициализация
Код инициализации аккордеона вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--accordion.js Аккордеон в Zero-блоке. https://postnikovmd.com/mods/accordion-->
<script>accordion.init(".uc-accordion")</script>Примеры использования
Классический аккордеон в Zero-блоке
Создаётся Zero-блок с классом .uc-accordion и аккордеоном в раскрытом состоянии. Вкладкам присваиваются классы .accordion, контенту – .accordion-content. По желанию добавляется иконка .accordion-icon и задаются стили в генераторе кода:
<script>accordion.init(".uc-accordion", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>Аккордеон с автолэйаутом
Классический аккордеон, расположенный в контейнере с автолэйаутом. Используется, когда необходимо расположить его в общей карточке и подстраивать её высоту под размер контента.
Верстается так же, как и классический вариант, но вкладки и контент дополнительно объединяются во flex-карточки с классом .tn-accordion-card, а эти карточки – во flex-группу с классом .tn-accordion. При необходимости общую группу с аккордеоном можно и дальше объединять с другими элементами, повышая её уровень вложенности.
Такой аккордеон может быть визуально не отличим от классического , но добавлять карточки в интерфейсе намного удобнее.
<script>accordion.init(".uc-accordion", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>Пример: Аккордеон с автолэйаутом
При вёрстке в автолэйауте убедитесь, что высота артборда выставлена, как Fixed. Автовысота будет препятствовать его корректному раскрытию.
Аккордеон в хэдере и выпадающем меню
Классический аккордеон, совмещенный с модификацией Zero-хэдера. Свёрстан внутри выпадающего меню и меню-бургера с использованием автолэйаута.
<!--Инициализируем хэдер-->
<script>header.init(".uc-header", { hideDistance: 360, hideDistanceMobile: 240, style: { active:{ color: "#FFFFFF", backgroundColor: "#2C2B31", borderColor: "#2C2B31", underline: 1 }, hover:{ color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } } })</script>
<script>submenu.init(".uc-submenu", { style: { hover: { color: "#988FFF" }, link:{ color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } } })</script>
<script>menu.init(".uc-menu", { fullscreen: true, animation: 'fade', style: { active:{ color: "#A3A3A4" }, hover:{ color: "#988FFF" } } })</script>
<!--Инициализируем аккордеон в хэдере-->
<script>accordion.init(".uc-submenu", { hover: true, style: { icon: { rotate: -90 } } })</script>
<script>accordion.init(".uc-menu")</script>Для аутентичного поведения выпадающего меню, задали ему раскрытие по наведению и повернули активную иконку на 90 градусов против часовой стрелки.
Аккордеон внутри поп-апа
Если аккордеон находится внутри кастомного поп-апа, то запускать его необходимо перед помещением в поп-ап. Добавляем пользовательское событие accordioninit в код инициализации поп-апа:
<!--Инициализируем аккордеон-->
<script>accordion.init(".uc-popup", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>
<!--Отслеживаем инициализацию аккордеона и запускаем кастомный поп-ап-->
<script>popup.init(".uc-popup", { event: "accordioninit-popup", animation: "zoom", style: { blur: 4 } })</script>Пример: Аккордеон внутри поп-апа
Аккордеон c несколькими колонками
Для создания аккордеона с несколькими колонками, вкладки и контент располагают друг под другом в несколько рядов. Первая карточка должна находиться в слоях в самом низу, каждая следующая — на уровень выше, а для каждого следующего ряда карточки располагаются на уровень выше, чем карточки предыдущего.
Можно верстать как в классическом виде, так и с помощью автолэйаута.
<script>accordion.init(".uc-accordion", { style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>Аккордеон из отдельных Zero-блоков
Аккордеон, в котором каждая вкладка и контент – отдельный блок, раскрывающийся по клику. Блокам со вкладками присваивается класс .uc-accordion, блокам с контентом – .uc-accordion-block, а иконке – .accordion-icon.
По-умолчанию контент раскрывается при нажатии на всю вкладку, но при необходимости ограничить область клика, в неё можно добавить элемент с классом .accordion-button.
Сгенерированный код идентичен классическому аккордеону:
<script>accordion.init(".uc-accordion", { collapse: true, style: { icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>Распространенные проблемы
Карточки аккордеона остаются развернутыми
Проблема возникает, когда в аккордеоне не совпадает количество вкладок и контента. Проверьте, что классы .accordion и .accordion-content заданы только группам с типом Object, а их количество совпадает.
После аккордеона остается пустое пространство
Одна из распространенных проблем, возникающая по нескольким причинам:
В блоке присутствуют элементы, которые мешают ему закрыться.
Элементы, нижняя граница которых располагается ниже, чем сам аккордеон, могут препятствовать его закрытию, так как учитываются при расчете минимальной высоты блока. Для решения проблемы добавьте им класс .tn-accordion-exclude, чтобы исключить их из логики обработки, или сделайте их размеры меньше.
Элементы, нижняя граница которых располагается ниже, чем сам аккордеон, могут препятствовать его закрытию, так как учитываются при расчете минимальной высоты блока. Для решения проблемы добавьте им класс .tn-accordion-exclude, чтобы исключить их из логики обработки, или сделайте их размеры меньше.
В мобильных версиях есть элементы, вынесенные за пределы экрана.
Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока.
Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока.
Между вкладками, контентом или карточками есть отступы
При создании аккордеона модификация объединяет созданные группы во flex-контейнеры, которые не учитывают отступы, заданные в Тильде. Из-за этого карточки сдвигаются вверх, и в конце блока остается пустое пространство. Чтобы решить эту проблему, задайте нулевые отступы между карточками и регулируйте их через параметр gap в коде инициализации.
При создании аккордеона модификация объединяет созданные группы во flex-контейнеры, которые не учитывают отступы, заданные в Тильде. Из-за этого карточки сдвигаются вверх, и в конце блока остается пустое пространство. Чтобы решить эту проблему, задайте нулевые отступы между карточками и регулируйте их через параметр gap в коде инициализации.
Блок с аккордеоном обрезается
У данной проблемы есть две возможные причины:
Исходная высота блока меньше, чем сам аккордеон
Модификация вычисляет отступ от нижней границы раскрытого аккордеона до края блока, и учитывает его при дальнейшем раскрытии карточек. Если высота блока в Тильде меньше, чем аккордеон, данный отступ становится отрицательным и сохраняется при дальнейшей работе мода. Для исправления проблемы убедитесь, что высота блока вмещает весь аккордеон в раскрытом состоянии.
Модификация вычисляет отступ от нижней границы раскрытого аккордеона до края блока, и учитывает его при дальнейшем раскрытии карточек. Если высота блока в Тильде меньше, чем аккордеон, данный отступ становится отрицательным и сохраняется при дальнейшей работе мода. Для исправления проблемы убедитесь, что высота блока вмещает весь аккордеон в раскрытом состоянии.
В настройках Zero-блока задана автовысота Hug
Данная настройка конфликтует с логикой изменения высоты аккордеона при его раскрытии. Установите фиксированную высоту артборда для решения данной проблемы.
Данная настройка конфликтует с логикой изменения высоты аккордеона при его раскрытии. Установите фиксированную высоту артборда для решения данной проблемы.
Пропадает отступ между карточками аккордеона
При создании аккордеона модификация объединяет созданные группы во flex-контейнеры, которые не учитывают отступы, заданные в Тильде. Из-за этого карточки сдвигаются вверх, и в конце блока остается пустое пространство. Чтобы решить эту проблему, задайте нулевые отступы между карточками и регулируйте их через параметр gap в коде инициализации.
Если необходимо добавить вертикальный отступ между вкладкой и контентом, используйте для группы с контентом padding-top.
Не работает иконка раскрытия
Если иконка некорректно обрезается или смещается при повороте, убедитесь, что она имеет квадратные пропорции. Изменение стилей активной иконки поддерживается только для элементов с типом Shape.
Карточки перемешиваются в случайном порядке
Данная проблема часто возникает, если вкладки и контент некорректно расположены в слоях или имеют отрицательные отступы.
Если карточки перемешались в аккордеоне с несколькими колонками, убедитесь, что в каждом ряду вкладки и контент выровнены по левому краю, а верхняя граница каждой колонки совпадает.
Возникает конфликт с другими модами
Zero-аккордеон совместим с большинством модификаций из исходной библиотеки. Исключение: вкладки, поп-ап, и слайдер, которые необходимо запускать через пользовательские события.
Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать после отрисовки аккордеона. С решениями, влияющими на высоту Zero-блока, модификация не совместима.
Если при установке что-то пошло не так
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=accordion, чтобы посмотреть настройки и переменные аккордеона. Данные функции работают на любом сайте с установленной библиотекой.