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

Карточки с раскрывающимся текстом — так это называется в Тильде. Ну, а для всех остальных — это аккордеон.

Данная модификация работает для следующих блоков:

TX16N: Текст в раскрывающихся карточках
TX16N2: Текст в раскрывающихся карточках на цветном фоне
SV501: Текст в раскрывающихся карточках

Посмотрите пример, чтобы понять, как работает модификация.

Инструкция:

Добавьте один из блоков с аккордеоном (TX16N / TX16N2 / SV501) на страницу.
Уберите заголовок и описание из шапки блока, если используете SV501.
Уберите отступы сверху и снизу у блока, а также фон, если он задан (у вас применится фон Zero-блока).
Создайте Зеро-блок, добавьте в него HTML-элемент, а внутри напишите: <div id="zero-accordion"></div>.
Впишите в настройки ниже ID блоков.
Скопируйте полученный код и вставьте его в блок T123. Сам блок разместите под вашими элементами (Zero-блоком и аккордеоном) или в самом низу страницы.

<!-- Аккордеон в Zero-блоке | https://necodim.ru/tilda/accordion-in-zero -->

<script>
const zeroWithAccordionArtboard = document.querySelector('#rec123456789 .t396__artboard');
zeroWithAccordionArtboard.addEventListener('artBoardRendered', () => {
    let accordionZero = document.getElementById('zero-accordion');
    accordionZero.appendChild(document.querySelector('#rec234567890'));
    accordionZero.querySelectorAll('.t-col').forEach(col => (col.style.marginLeft = '0', col.style.marginRight = '0'));
    accordionZero.querySelectorAll('button').forEach(button => {
        button.addEventListener('click', (e) => {
            const zeroArtboardHeight = zeroWithAccordionArtboard.offsetHeight;
            const zeroFilter = zeroWithAccordionArtboard.querySelector('.t396__filter');
            const zeroCarrier = zeroWithAccordionArtboard.querySelector('.t396__carrier');
            const accordionHeight = accordionZero.offsetHeight;
            const interval = setInterval(() => {
                const heightText = Math.floor(zeroArtboardHeight + accordionZero.offsetHeight - accordionHeight) + 'px';
                zeroWithAccordionArtboard.style.height = heightText;
                zeroFilter.style.height = heightText;
                zeroCarrier.style.height = heightText;
                zeroWithAccordionArtboard.style.minHeight = heightText;
                zeroFilter.style.minHeight = heightText;
                zeroCarrier.style.minHeight = heightText;
            }, 16);
            setTimeout(() => { clearInterval(interval) }, 400);
        });
    });
});
</script>

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

Пример работы модификации

Этот аккордеон находится внутри Zero-блока

F.A.Q.