Модификации

+16

Максим Постников

hello@postnikovmd.com

Политика Конфиденциальности

+16

Главная
→
Модификации
→
Zero-аккордеон
→
Время настройки: 5 минут

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

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

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

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

Дополнение

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

Дополнение

Аккордеон внутри Zero‑блока

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

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

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

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

Создайте Zero-блок и добавьте в него карточки аккордеона в раскрытом состоянии

Они могут состоять из любого количества элементов и быть расположены в любом месте внутри Zero-блока. Каждая карточка должна иметь заголовочную секцию (вкладку) и её содержимое. См. пример
Задайте блоку с аккордеоном класс .uc-accordion

Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion2 и т. д.
Объедините каждую вкладку и её содержимое в отдельные группы и задайте им тип Object

Количество групп со вкладками и содержимым должно совпадать. Для того, чтобы при объединении карточки сохраняли свои размеры, добавьте прозрачный шейп или подложку по их границам. См. пример
Присвойте группам со вкладками класс .accordion, а их содержимому — .accordion-content

Если внутри вкладок есть иконки, которые должны переворачиваться и менять своё состояние при раскрытии, присвойте им класс. accordion-icon.
Расположите карточки в слоях в порядке возрастания

Первая карточка должна находиться в самом низу, а каждая следующая — на уровень выше. Первой группе с заголовочной секцией будет соответствовать первая группа с её содержимым. См. пример
Задайте в настройках модификации стили и поведение аккордеона
Скопируйте код и вставьте его в блок T123 в конец страницы

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

<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>

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

Пример с автолэйаутом

+

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

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

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

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

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

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

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

Аккордеон

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

Иконки

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

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

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

Карточки

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

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

Радиус скругления

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

<!--accordion.js Аккордеон в Zero-блоке. https://postnikovmd.com/mods/accordion-->
<script>accordion.init(".uc-accordion")</script>

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

Особенности

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

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

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

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