Модификация позволяет создавать полностью кастомные аккордеоны внутри Zero-блоков со своими стилями и поведением.
Как работает модификация
Общие механики
Аккордеон преобразует свёрстанные вкладки и контент в карточки и помещает их в общий контейнер с исходными размерами и позиционированием. В качестве вкладок и контента выступают группы Object с классом .accordion и .accordion-content.
Раскрытие и скрытие карточек осуществляется за счет добавления к ним класса .collapsed, который регулирует высоту видимого контента.
Расстояние между карточками определяется автоматически по их расположению в вёрстке и сохраняется при работе аккордеона. Задать или изменить его вручную можно через параметр gap.
Изменение состояния карточек запускает автоматическое вычисление размеров аккордеона и регулирует высоту Zero-блока на их основе. При расчете также учитываются другие элементы в блоке, которые определяют его минимальную высоту, а элементы, располагающиеся ниже аккордеона, сдвигаются пропорционально изменению его размеров так, что отступ между ними и аккордеоном сохраняется постоянным.
Иконки раскрытия .accordion-icon располагаются во вкладках и привязываются к состоянию карточек, в которых они находятся. В генераторе кода им можно задать стили активного состояния.
Изменение размеров экрана перезапускает отрисовку аккордеона: он разбирается до первоначального состояния и собирается заново с учетом новых координат и настроек элементов.
Классический аккордеон в Zero-блоке
Аккордеон, в котором все вкладки и контент располагаются друг под другом в одном Zero-блоке. С его помощью можно создавать как обычные выпадающие списки, так и встраивать их в хэдер, меню, поп-апы и др.
Поддерживает вёрстку в автолэйауте (см. пример: Аккордеон с автолэйаутом)
Подробнее: Классический аккордеон в Zero-блоке
Аккордеон с несколькими колонками
Классический аккордеон, в котором вкладки и контент располагаются в несколько колонок. Модификация автоматически определяет их порядок (слева направо и сверху вниз), и создаёт несколько аккордеонов, связанных друг с другом.
Подробнее: Аккордеон с несколькими колонками
Аккордеон из отдельных Zero-блоков
Распространенный вариант аккордеона, в котором каждая вкладка и контент – отдельный блок, раскрывающийся по клику. Поддерживает как Zero, так и стандартные блоки, легко устанавливается, но ограничен по возможностям вёрстки.
Подробнее: Аккордеон из отдельных Zero-блоков
Определение порядка карточек
Модификация имеет встроенные механики автоматического ранжирования и фильтрации карточек.
Перед объединением каждая вкладка и контент упорядочиваются по координатам — слева направо и сверху вниз. Это позволяет выстроить правильный порядок карточек в аккордеоне и распределить по колонкам в зависимости от положения.
Кроме того, модификация проверяет, что классы .accordion и .accordion-content заданы группам Object и автоматически исключает из выборки вложенные внутри них элементы с таким же классом. За счёт этого вложенные элементы с ошибочно указанными классами не считаются за отдельные вкладки.
При необходимости отключить авторанжирование и фильтрацию можно с помощью параметров arrange: false и filter: false.
Начало работы
Установка библиотеки
Для работы аккордеона необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.6/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(){ ... })Инициализация
Код инициализации аккордеона вставляется в блок 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. Автовысота будет препятствовать его корректному раскрытию.
Аккордеон по Window-контейнеру
Аккордеон, у которого вкладки и контент имеют привязку по Window-контейнеру. Настраивается, как классический вариант, но может быть так же свёрстан в автолэйауте, если карточки и контент необходимо растягивать по всей ширине экрана.
Для привязки аккордеона по Window в настройках группы необходимо изменить тип контейнера с Grid на Window. Код инициализации аналогичен предыдущим вариантам:
<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>Чтобы растянуть аккордеон на всю ширину экрана, необходимо изменить его размерные единицы с пикселей на %. На данный момент в Тильде нет прямого способа это сделать для групп, поэтому задаём ширину через css-стили:
<style>
@media screen and (min-width: 1200px) {
.uc-accordion .tn-accordion {
width: calc(100% - 560px) !important; /* Отступ от левого и правого края для компьютерной версии – 40px, ширина левой колонки 400px, расстояние от колонки до аккордеона 80px. Устанавливаем ширину аккордеона как разницу между 100% экрана и 560px (40px * 2 + 400px + 80px) */
}
}
@media screen and (max-width: 479px) {
.uc-accordion .tn-accordion {
width: calc(100% - 20px) !important; /* Отступ от левого и правого края для мобильной версии – 10px. В таком случае ширина аккордеона – это разница между 100% экрана и 20px (10px * 2) */
}
}
</style>Пример: Аккордеон по Window-контейнеру
Данный пример свёрстан через автолэйаут, чтобы при изменении ширины экрана, размеры карточек автоматически под него подстраивались с учетом заданных отступов.
Аккордеон в хэдере и выпадающем меню
Классический аккордеон, совмещенный с модификацией 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>Если аккордеон необходимо сверстать по Window-контейнеру, изменяем у вкладок и контента тип привязки с Grid на Window.
Для позиционирования и растягивания колонок, используем css-стили, позволяющие вычислять расстояние в процентах:
<style>
@media screen and (min-width: 1200px) {
.uc-accordion .tn-accordion {
width: calc(50% - 20px) !important; /* Задаём ширину каждого аккордеона, как 50% экрана с учетом отступов в 20px с каждой стороны */
}
.uc-accordion .tn-accordion[data-accordion-index="0"] {
left: calc(0% + 20px) !important; /* Позиционируем первую колонку с учетом отступа 20px*/
}
.uc-accordion .tn-accordion[data-accordion-index="1"] {
left: calc(50% + 0px) !important; /* Позиционируем вторую колонку с учетом отступа 20px*/
}
}
@media screen and (max-width: 479px) {
.uc-accordion .tn-accordion {
width: calc(100% - 20px) !important; /* Задаём ширину аккордеона для мобильной версии с учетом отступов в 10px с каждой стороны */
}
}
</style>Аккордеон с переключением доп. элементов
Для того, чтобы переключать другие элементы при раскрытии/скрытии карточек аккордеона, достаточно задать в параметрах onexpand/oncollapse пользовательскую функцию с необходимой логикой.
Например, для смены статичного изображения сбоку от аккордеона, код может выглядеть так:
<script>accordion.init(".uc-accordion", { onexpand: function(accordion, index){ let images = document.querySelectorAll(".accordion-image"); images.forEach(function(image, imageindex){ image.classList.remove('active'); if (imageindex === index) image.classList.add('active') }) } })</script>
<style>
.uc-accordion .accordion-image {
opacity: 0 !important;
pointer-events: none;
transition: opacity .3s ease-in-out !important;
}
.uc-accordion .accordion-image.active {
opacity: 1 !important;
pointer-events: auto;
}
</style>Аккордеон из отдельных 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, чтобы исключить их из логики обработки, или сделайте их размеры меньше.
Пример: Аккордеон в общей карточке
В мобильных версиях есть элементы, вынесенные за пределы экрана.
Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока.
Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока.
Если блок обрезается, в большинстве случаев это связано с тем, что исходная высота блока оказывается меньше, чем сам аккордеон в раскрытом состоянии. В таком случае между аккордеоном и границами блока образуется отрицательный отступ, который сохраняется при дальнейшей работе аккордеона. Для исправления проблемы достаточно убедиться, что высота блока вмещает весь аккордеон в раскрытом состоянии.
Пропадает отступ между карточками аккордеона
Расстояние между карточками определяется автоматически по их расположению в вёрстке. Если отступ пропал или отличается от нужного, задайте его явно через параметр gap в коде инициализации. Если необходимо добавить вертикальный отступ между вкладкой и контентом, используйте padding-top для группы с контентом.
Не работает иконка раскрытия
Если иконка некорректно обрезается или смещается при повороте, убедитесь, что она имеет квадратные пропорции и задана как шейп Shape с фоновой заливкой. Изменение стилей активной иконки для элементов Image не поддерживается.
Карточки перемешиваются в случайном порядке
Порядок карточек определяется автоматически на основании их координат. Если вкладки и контент не выровнены по левому краю или имеют отрицательные отступы друг от друга, это может нарушить их порядок в аккордеоне.
Если вёрстка сознательно предусматривает нарушение сетки, отключить авторасстановку карточек можно через параметр arrange: false — в таком случае карточки будут выстраиваться по расположению в слоях.
При раскрытии карточек происходит скролл
Когда высота раскрытого аккордеона оказывается больше, чем высота экрана, модификация автоматически включает скролл до раскрытой вкладки. Это помогает перемещаться к раскрытой вкладке, когда её контент уходит за пределы экрана. Отключить эту функцию можно через параметр scroll: false
На странице работает только первый аккордеон
Такая проблема может возникнуть, если внутри блоков с другими аккордеонами изменены классы элементов. При использовании нескольких аккордеонов на странице, изменять нужно только класс самого блока (например, .uc-accordion1, .uc-accordion2). Классы внутренних элементов должны оставаться одинаковыми: .accordion, .accordion-content и др.
Для решения проблемы убедитесь, что элементам внутри блоков заданы одинаковые классы, а в коде инициализации содержится несколько отдельных вызовов для каждого блока.
Не получается сделать закрытыми все карточки
При включённой настройке «Оставлять раскрытой только одну карточку» (collapse: true) первая карточка раскрывается автоматически. Для того, чтобы все карточки были закрыты по умолчанию, в коде инициализации аккордеона нужно дополнительно указать параметр expand: false.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
