Аккордеон в Zero-блоке

Модификация позволяет создавать полностью кастомные аккордеоны внутри Zero-блоков со своими стилями и поведением.

Как работает модификация

Общие механики

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

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

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

Начало работы

Установка библиотеки

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

Элементы

Функции и параметры

Стили

События

accordion.init(".uc-accordion", { event: "customEvent", timeout: 100 })

window.addEventListener("accordioninit-accordion1", function(){ ... })

popup.init(".uc-accordion", { event: "accordioninit-accordion" })

Инициализация

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

Примеры использования

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

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

Аккордеон с автолэйаутом

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

Аккордеон по 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>

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

Аккордеон в хэдере и выпадающем меню

<!--Инициализируем хэдер-->
<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>

Аккордеон внутри поп-апа

<!--Инициализируем аккордеон-->
<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>

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

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

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

Распространенные проблемы

Карточки аккордеона остаются развернутыми

После аккордеона остается пустое пространство

Блок с аккордеоном обрезается

Пропадает отступ между карточками аккордеона

Не работает иконка раскрытия

Карточки перемешиваются в случайном порядке

Возникает конфликт с другими модами

Если модификация все равно не работает