1. Создали ZeroBlock и добавили в него четыре элемента Gallery, присвоив им классы:
acc_zeroslider1, acc_zeroslider2 и далее по аналогии.
2. Для блока установили высоту 0 px и активировали параметр overflow: visible.
Галереи выровняли по правой стороне.
3. Добавили блок TX16N2 с четырьмя вкладками и назначили ему класс uc-accordion.
Параметры блока:
- 4 колонки
- Первая карточка открыта по умолчанию
- Режим «Аккордеон»
- Одновременно отображается только одна раскрытая вкладка
4. Вставили необходимый код в блок «Другое» (T123).
<!-- Как при смене вкладки TX16N2 отобразить нужный баннер галерею в ZeroBlock в Tilda https://tbmsc.ru/
<script>
document.addEventListener('DOMContentLoaded', () => {
const sliders = Array.from(document.querySelectorAll('[class*="acc_zeroslider"]'));
const accordionItems = document.querySelectorAll('.uc-accordion .t668__accordion');
if (!sliders.length || !accordionItems.length) return;
// Назначаем индекс каждому слайдеру
sliders.forEach((slider, i) => {
slider.dataset.sliderIndex = i;
if (i !== 0) slider.classList.add('zb-hidden');
});
const closeAllSliders = () => {
sliders.forEach(slider => slider.classList.add('zb-hidden'));
};
const openSliderByIndex = (index) => {
const target = sliders.find(s => Number(s.dataset.sliderIndex) === index);
if (!target) return;
closeAllSliders();
target.classList.remove('zb-hidden');
};
accordionItems.forEach((item, index) => {
item.addEventListener('click', () => {
const header = item.querySelector('.t668__header');
// Ждём пока Tilda добавит/удалит класс opened
requestAnimationFrame(() => {
setTimeout(() => {
const isOpen = header.classList.contains('t668__opened');
if (isOpen) {
openSliderByIndex(index);
} else {
closeAllSliders();
}
}, 250);
});
});
});
});
</script>
<style>
/* Поведение колонок */
.uc-accordion .t668__col {
display: block;
float: none;
}
/* Плавное появление */
[class*="acc_zeroslider"] {
opacity: 1;
transition: opacity .35s ease, visibility .35s ease;
}
.zb-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Вертикальный аккордеон */
.uc-accordion .t668 > .t-container {
display: flex;
flex-direction: column;
}
/* Блокируем повторный клик по открытому пункту */
.uc-accordion .t668__header.t668__opened {
cursor: default;
pointer-events: none;
}
/* Убираем изображения в десктопе */
@media (min-width: 1000px) {
.uc-accordion img.t668__img {
width: 0;
height: 0;
overflow: hidden;
}
}
</style>
