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

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

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

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

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/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>
Скопировать код
Скопировать код
Код скопирован!

Примеры

classic
Классический аккордеон
Пример кастомного аккордеона внутри одного Zero‑блока
Открыть пример
flex
Аккордеон с автолэйаутом
Аналог классического аккордеона, собранного с автолэйаутом
Открыть пример
card
Аккордеон в общей карточке
Пример аккордеона внутри общей карточки с подложкой/фоном
Открыть пример
dynamic
Аккордеон с доп. элементами
Аккордеон, под которым располагаются отдельные элементы
Открыть пример
popup
Аккордеон в поп-апе
Пример аккордеона, размещённого во всплывающем окне (pop-up)
Открыть пример
header
Аккордеон в хэдере и меню
Пример Zero-аккордеона внутри выпадающих меню и бургера
Открыть пример
window
Аккордеон по Window
Пример классического аккордеона, растянутого по всей ширине экрана
Открыть пример
multiple
Аккордеон в несколько колонок
Вариант аккордеона с расположением в несколько колонок
Открыть пример
default
Аккордеон из отдельных блоков
Пример аккордеона, собранного из нескольких Zero‑блоков
Открыть пример
hover
Аккордеон с ховер-эффектом
Пример аккордеона, в котором блоки раскрываются по наведению
Открыть пример

Документация

Элементы

Параметры

Подробная документация к аккордеону

Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат для дизайнеров
«Вместе всё получится»
Поддержка по модификациям, обмен опытом, круассаны и многое другое
3,2K участников