Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как создать две колонки у аккордеона TX16N в Tilda

Как создать две колонки у аккордеона TX16N в Tilda

1
Создали блок TX16N
2
В настройках задали ему:
  • класс uc-acc-two-column
  • ширину 6 колонок
  • без отступа слева
3
Добавили код на страницу в блок Другое - Т123
В коде указали кол-во элементов в левой колонке
const leftColumnCounts = 4;
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём аккордеон в 2 колонки. Меняем состав колонок. Создаём несколько блоков.
Длительность видео: 19 минут
Фрагмент видео
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const accordBlock = document.querySelector(".uc-acc-two-column");
        if(accordBlock!=null){
            const leftColumnCounts = 4;
            accordBlock.classList.add('twoColAcc');
            const accordContainer =  accordBlock.querySelector(".t-container");
            
            const accordElements =  accordBlock.querySelectorAll(".t-col");
            
            const leftCol = document.createElement("div");
            leftCol.className = "leftColumn Column";
            accordContainer.append(leftCol);
            
            const rightCol = document.createElement("div");
            rightCol.className = "rightColumn Column";
            accordContainer.append(rightCol);
            
            for(let i=0; i<accordElements.length; i++){
    
                if(i<leftColumnCounts){
                    accordElements[i].classList.add('leftaccord');
                    leftCol.append(accordElements[i]);
                }else{
                    accordElements[i].classList.add('rightaccord');    
                    rightCol.append(accordElements[i]);
                };
                
            };
        };
    })();    
});    
</script>


<style>
.twoColAcc .t585 .t-col:not(:last-child) .t585__border {
        display: none;
}
@media screen  and (min-width: 960px){
    .twoColAcc  .t585 .t-col {
        float: none;
        display: block;
    }
    .twoColAcc .Column {
        width: 50%;
        float: left;
    }
    .twoColAcc .leftaccord:last-child {
        border-bottom: 1px solid #c4c4c4;
    }
}
</style>

Made on
Tilda