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

Оформить доступ с промокодом
100
Как добавить раскрывающийся текст в блок PL110 из блока TX17N в Tilda
Первый набор
Изысканный и потрясающий
  • Состав:
4200 ₽
3500 ₽
Выбрать набор
Второй набор
Очаровательный и необычный
  • Состав:
3550 ₽
2900 ₽
Выбрать набор
Третий набор
Удивляющий и незабываемый
  • Состав:
4660 ₽
3790 ₽
Выбрать набор

Как добавить раскрывающийся текст в блок PL110 из блока TX17N в Tilda

1
Создали блок PL110 и задали ему настройки:
  • 3 колонки
  • без выделения главной колонки
  • одинаковая ширина и высота для картинки (квадрат)
  • убрали опцию - картинка в кружке
Пример оформления на скрине ниже
2
Создали 3 блока TX17N и заполнили его контентом
Заголовок 2 и Текст 2 оформили в виде маркированного списка
Пример оформления на скрине ниже
3
Добавляем код в блок Другое - Т123
Прописали ID блока TX17N и номер колонки для него в блоке PL110
"#rec412231329":"1",
"#rec412417671":"2",
"#rec412418478":"3"
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём выпадающий текст в блок тарифов PL110.
Наполнение берём из блока TX17N
Фрагмент видео
Библиотека для примера
Выпадающий текст

<script>
$( document ).ready(function() {
let blockObj = {
    "#rec412231329":"1",
    "#rec412417671":"2",
    "#rec412418478":"3"
};
$.each(blockObj, function( key, value ) {
    let col = (+value)-1;
    $('.t615__descr:eq('+col+')').append('<div class="t615__accord-wrap"></div>');
    let result='';
    $(key).find('.t664__col').each(function(){
    let = contTxt = '';
        let mainCol = $(this);
        let qName = mainCol.find('.t664__question-name').text();
        let qTxt = mainCol.find('.t664__question-text:first').text();
        $(this).find('.t664__answer-name li').each(function(index){
            let ansName = $(this).text();
            let ansText = mainCol.find('.t664__question-text li:eq('+index+')').text();
            contTxt += `<div class="t615__accord-desription"><div>${ansName}</div><div>${ansText}</div></div>`;
            
        });
        result +=  `<div class="t615__accord">
                        <div class="t615__accord-title">
                            <div>${qName}</div><div>${qTxt}</div>
                        </div>
                        <div class="t615__accord-desr-wr">
                            ${contTxt}
                        </div>
                    </div>`; 
    });
    $('.t615__descr:eq('+col+')').find('.t615__accord-wrap').append(result);
});

$('.t615__accord-title').click(function(){
    if( $(this).hasClass('acc-open')){
        $(this).closest('.t615__accord').find('.t615__accord-desr-wr').slideUp(300);
        $(this).removeClass('acc-open');
    }else{
        $(this).closest('.t615__accord-wrap').find('.t615__accord-desr-wr').slideUp(300);
        $(this).closest('.t615__accord').find('.t615__accord-desr-wr').slideDown(300);      
        $(this).closest('.t615__accord-wrap').find('.t615__accord-title').removeClass('acc-open');
        $(this).addClass('acc-open');
    };
});
});	
</script>


<style>
/*Настройки аккордеона*/
.t615__accord-title {
    display: flex;
    cursor: pointer;
    padding: 6px 0;
}
.t615__accord {
    font-size: 13px;
    text-align: left;
}
.t615__accord-title div { width: 50%}
.t615__accord-desription {
    display: flex;
    padding: 7px 0;
}
.t615__accord-desr-wr{ display:none}
.t615__accord-desription div { width: 50%}
.t615__descr { height: auto !important}
.t615__accord:nth-child(2n-1) { background-color: #f6f8fa}
.t615__accord-title:hover { background-color: #ebebeb}
.t615__accord-title>div:first-child ,
.t615__accord-desription>div:first-child { padding-left: 10px}

.t615__accord-title>div:last-child ,
.t615__accord-desription>div:last-child { padding-right: 10px}

.t615__accord-title>div:first-child { font-weight: 400}

.t615__accord-title>div:last-child { position: relative}

.t615__accord-title>div:last-child:after {
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(https://static.tildacdn.com/tild6363-3630-4861-a135-383133356135/angle-arrow-down_ico.svg);
    position: absolute;
    background-size: contain;
    opacity: 0.3;
    margin-left: 7px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}
.t615__accord-title.acc-open>div:last-child:after {
    transform: translateY(-50%) rotate(180deg);
}
div[data-record-type="664"]{display:none}
</style>
Библиотека для примера
Стили из данного примера

<script>
// Перемещеие цены
$( document ).ready(function() {
$('.t615__btn').wrap('<div class="t615__btn-wrapper"></div>');
$('.t615__col').each(function(){
   $(this).find('.t615__price-wrap').appendTo(  $(this).find('.t615__btn-wrapper')  );
});
});	
</script>


<style>
/*Настройки фото*/
.t615__bgimg {
    width: 100%;
    height: 210px;
    border-radius: 10px;
}

/*Настройки карточки*/
.t615__content {
    box-shadow: 0 15px 25px 5px rgb(7 80 165 / 10%);
    background: linear-gradient( 180deg , #fff, #f7fcff) !important;
    padding: 30px 30px 45px;
    position: relative;
    z-index: 0;
}
.t615__content:after {
    content: "";
    width: 102%;
    height: 100%;
    background-color: #fcfeff;
    position: absolute;
    top: -8px;
    left: -1%;
    border-radius: 15px;
    z-index: -2;
    box-shadow: 0 15px 35px -5px rgb(7 80 165 / 10%);
    background: linear-gradient(180deg , #fff, #f7fcff) !important;
}


/*Настройки цены*/
.t615__price-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.t615__price-wrap .t615__price {
    margin-bottom: 0;
}
.t615__price.t615__price_old {
    font-size: 16px !important;
}


/*Настройки кнопки*/
.t615__btn {
    background: linear-gradient( 180deg ,#fee490 0%,#f9b334 100%);
    box-shadow: 0 2px 0 0 rgb(255 150 0 / 0%), 0 10px 35px 0 rgb(255 150 0 / 30%), inset 0 2px 0 0 rgb(255 254 204 / 0%);
    border-bottom: 3px solid #ff9600;
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    margin-top: 0;
    transition: all 0.3s ease-in-out;
}
.t615__btn:hover {
    border-bottom: 3px solid #c77500;
}

.t615__btn-wrapper {
    margin-top: 34px;
    text-align: left;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 9px 35px 10px rgb(45 69 105 / 10%);
    display: flex;
    align-items: center;
}
@media screen and (max-width:1200px){
.t615__btn {
    padding-left: 20px;
    padding-right: 20px;
}
}
@media screen and (max-width: 960px){
.t615__btn {
    padding-left: 40px;
    padding-right: 40px;
    width: 200%;
}
}
@media screen and (max-width: 400px){
.t615__btn {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    font-size: 14px !important;
}
}
</style>
  • Компонент №1
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №2
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №3
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №4
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а
  • Компонент №5
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №6
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №7
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b
    • Свойство-а, Свойство-b
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №8
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №9
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №10
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №1
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №2
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №3
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №4
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №5
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №6
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №7
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №8
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №9
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №10
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №11
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №12
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №1
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №2
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №3
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №4
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №5
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №6
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №7
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №8
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №9
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №10
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №11
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №12
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №13
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №14
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
  • Компонент №15
    Подробнее:
    • Ингредиент-1
    • Ингредиент-2
    • Ингредиент-3
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
    • Свойство-а, Свойство-b, Свойство-c, Свойство-d
Made on
Tilda