Регистрация
Личный кабинет
Регистрация
Личный кабинет

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

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

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

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

Инструкция:
  1. Добавьте один из блоков с аккордеоном (TX16N / TX16N2 / SV501) на страницу.
  2. Уберите заголовок и описание.
  3. Уберите отступы сверху и снизу у блока, а также фон, если он задан (у вас применится фон Zero-блока).
  4. Создайте Зеро-блок, добавьте в него HTML-элемент, а внутри напишите: <div id="zero-accordion"></div>.
  5. Впишите в настройки ниже ID блоков.
  6. Скопируйте полученный код и вставьте его в блок T123. Сам блок разместите под вашими элементами (Zero-блоком и аккордеоном) или в самом низу страницы.
<!-- Аккордеон в Zero-блоке | https://necodim.ru/tilda/accordion-in-zero -->

<script>
const zeroWithAccordionArtboard = document.querySelector('#rec123456789 .t396__artboard');
zeroWithAccordionArtboard.addEventListener('artBoardRendered', function() {
    let zeroArtboardHeight = zeroWithAccordionArtboard.offsetHeight;
    let zeroFilter = zeroWithAccordionArtboard.querySelector('.t396__filter');
    let zeroCarrier = zeroWithAccordionArtboard.querySelector('.t396__carrier');
    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'));
    let accordionHeight = accordionZero.offsetHeight;
    accordionZero.querySelectorAll('button').forEach(button => {
        button.addEventListener('click', (e) => {
            let interval = setInterval(() => {
                zeroWithAccordionArtboard.style.height = (zeroArtboardHeight + accordionZero.offsetHeight - accordionHeight) + 'px';
                zeroFilter.style.height = (zeroArtboardHeight + accordionZero.offsetHeight - accordionHeight) + 'px';
                zeroCarrier.style.height = (zeroArtboardHeight + accordionZero.offsetHeight - accordionHeight) + 'px';
            }, 16);
            setTimeout(() => { clearInterval(interval) }, 400);
        });
    });
});
</script>
Скопировать код
Пример работы модификации
Этот аккордеон находится внутри Zero-блока
F.A.Q.
Made on
Tilda