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

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

Как добавить дополнительные колонки с иконками для блока TX16N в Tilda

1
Создали блок TX16N м классом uc-accord-desc на 12 колонок и заполнили контентом
2
Для формирования иконок, добавляем в конце текста курсивом надпись ##1-0-1
где 1 - это иконка галочки, а 0 - иконка крестика
(пример заполнения на скрине ниже)
3
Добавили код в блок Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const accordBlock = document.querySelector('.uc-accord-desc');
        if(accordBlock!=null){
            
            const accordHeaderContent = `
                    <div class="accord-header-col1"></div>
                    <div class="accord-header-col2">КОМПЛЕКТАЦИЯ 1<br>Start</div>
                    <div class="accord-header-col3">КОМПЛЕКТАЦИЯ 2<br>Medium</div>
                    <div class="accord-header-col4">КОМПЛЕКТАЦИЯ 3<br>Maximum</div>
            `;
            const accordHeader = document.createElement("div");
            accordHeader.className = "accord-header t-text";
            accordHeader.innerHTML = accordHeaderContent;
            
            
            const accordFooterContent = `
                    <div class="accord-footer-col1"></div>
                    <div class="accord-footer-col2"><a href="#link-1">Выбрать</a></div>
                    <div class="accord-footer-col3"><a href="#link-2">Выбрать</a></div>
                    <div class="accord-footer-col4"><a href="#link-3">Выбрать</a></div>
            `;
            
            const accordFooter = document.createElement("div");
            accordFooter.className = "accord-footer t-text";
            accordFooter.innerHTML = accordFooterContent;

            accordBlock.querySelector('.t-container').firstElementChild.prepend(accordHeader);
            accordBlock.querySelector('.t-container').lastElementChild.append(accordFooter);
            
            
            const boxWrapper = `
                <div class="accord-box-col"></div>
                <div class="accord-box-col"></div>
                <div class="accord-box-col"></div>
            `;
            
            const headers = document.querySelectorAll('.uc-accord-desc .t585__header');
            for(let i=0; i<headers.length; i++){
                headers[i].insertAdjacentHTML('beforeend', boxWrapper);  
            };
            
            setTimeout(function() {
            const accordText = document.querySelectorAll('.uc-accord-desc .t585__text');
            for(let i=0; i<accordText.length; i++){
                let text = accordText[i].lastElementChild.textContent;
                
                if(text!=''){
                    if(text.indexOf("##") >= 0){
                        text = text.replace('##', '');
                        text = text.split('-');
                        
                        for(let j=0; j<text.length; j++){
                            if(text[j]=='0'){
                                accordText[i].closest('.t585__wrapper').querySelectorAll('.accord-box-col')[j].classList.add('cross');
                            };
                            if(text[j]=='1'){
                                accordText[i].closest('.t585__wrapper').querySelectorAll('.accord-box-col')[j].classList.add('check');
                            };
                        };
                    };
                };
                
            };
            }, 500);
        };
    })();    
});    
</script>

<style>
.accord-box-col.check {
    background-image: url(https://static.tildacdn.com/tild6465-3632-4764-a465-616162373038/photo_1.svg);
}
.accord-box-col.cross {
    background-image: url(https://static.tildacdn.com/tild3230-3063-4133-b231-313831643664/Group_1_8_1.svg);
}
.uc-accord-desc span.t585__lines {
    background-image: url(https://static.tildacdn.com/tild3430-3164-4461-b465-663633356130/downarrow_121316.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.uc-accord-desc span.t585__lines svg {
    opacity:0;
}
.uc-accord-desc .t585__opened .t585__lines {
    z-index: 1;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.uc-accord-desc button.t585__trigger-button {
    padding: 20px 50px 20px 50px;
}
.uc-accord-desc span.t585__icon {
    right: auto;
    left: 0;
}
.uc-accord-desc .t585__content {
    padding-left: 50px;
    box-sizing: border-box;
    max-width: 660px;
}

.accord-header {
    font-weight: 600;
}

.accord-header, 
.accord-footer,
.uc-accord-desc .t585__header{
    display: grid;
    grid-template-columns: 660px 1fr 1fr 1fr;
    font-size: 12px;
    font-weight: 400;
    grid-gap: 22px;
}
.accord-header,
.accord-footer{
    margin-bottom: 10px;
}
.accord-header>div,
.accord-footer>div
{
    text-align: center;
}
.uc-accord-desc .t585__text em {
    display: none;
}
.accord-box-col {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}


.uc-accord-desc span.t585__lines {
    background-image: url(https://static.tildacdn.com/tild3430-3164-4461-b465-663633356130/downarrow_121316.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.uc-accord-desc span.t585__lines svg {
    opacity:0;
}

.uc-accord-desc .t585__opened .t585__lines {
    z-index: 1;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.uc-accord-desc button.t585__trigger-button {
    padding: 20px 50px 20px 50px;
}

.uc-accord-desc span.t585__icon {
    right: auto;
    left: 0;
}

.uc-accord-desc .t585__content {
    padding-left: 50px;
}
.uc-accord-desc .t585 {
    overflow: auto;
}

.accord-header {
    font-weight: 600;
}

#allrecords .accord-footer a {
    color: #fcb42f;
    border: 1px solid #fcb42f;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

#allrecords .accord-footer a:hover {
    color: #fff;
    border: 1px solid #fcb42f;
    background-color:#fcb42f;
}

@media screen and (max-width: 1200px) {
.uc-accord-desc .t-container {
        max-width: 960px;
        width: 960px;
    }
    .accord-header, 
    .accord-footer,
    .uc-accord-desc .t585__header {
        display: grid;
        grid-template-columns: 500px 1fr 1fr 1fr;
        font-size: 11px;
        font-weight: 300;
        grid-gap: 5px;
    }
    .uc-accord-desc .t585__content{
        max-width: 500px;
    }
}
@media screen and (max-width: 960px) {
    .accord-header, 
    .accord-footer,
    .uc-accord-desc .t585__header {
        grid-template-columns: 370px 1fr 1fr 1fr;
    }
    .uc-accord-desc .t585__content {
        max-width: 370px;
    }
    .uc-accord-desc  .t-container {
        max-width: 760px;
        width: 760px;
    }
}
@media screen and (max-width: 540px) {
    .accord-header, 
    .accord-footer,
    .uc-accord-desc .t585__header {
        grid-template-columns: 300px 1fr 1fr 1fr;
    }
    .uc-accord-desc .t585__content {
        max-width: 300px;
    }
    .uc-accord-desc  .t-container {
        max-width: 650px;
        width: 650px;
    }
    
    .uc-accord-desc button.t585__trigger-button {
        padding: 20px 10px 20px 40px;
    }
    
    .uc-accord-desc .t585__icon {
        width: 14px;
        height: 14px;
    }
    
    .uc-accord-desc .t585__content {
        padding-left: 40px;
    }
    
    .uc-accord-desc .t585__circle {
        width: 30px;
        height: 30px;
    }
    
    .accord-box-col {
        background-size: 20px;
    }
    
}
</style>
Made on
Tilda