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

Оформить доступ с промокодом
100
#2470a1
Как сделать раскрытие текста отзыва в TS205 в Tilda
Our clients love us
  • Sarah Lewin
    It was just a gradual development over the years. Last year was "All You Need Is Love." This year it's "Give Peace a Chance." Remember love. If you want to get peace, you can get it as soon as you like if we all pull together.
    It was just a gradual development over the years. Last year was "All You Need Is Love." This year it's "Give Peace a Chance." Remember love. If you want to get peace, you can get it as soon as you like if we all pull together. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
  • Samuel Willson
    The principal element of Suprematism in painting, as in architecture, is its liberation from all social or materialist tendencies. Through Suprematism, art comes into its pure and unpolluted form.
    Et harum quidem rerum facilis est et expedita distinctio.
    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
    • One
    • Two
    • Three
    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  • Alex Larkins
    We were just building stuff 'cause we thought it was cool. I do remember having these specific conversations with my friends where we thought, you know, someone is gonna build this. Someone is gonna build something that makes it so that people can stay connected with their friends and their family.
    On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Как сделать раскрытие текста отзыва в TS205 в Tilda

1
Создали блок TS205
2
Добавили в описание видимую часть текста, а в текст прописали скрытую изначально часть
3
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём скрытие и раскрытие слишком больших отзывов в блоке TS205 в Tilda
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
    
    let beforeTxt = 'Подробнее';
    let afterTxt = 'Скрыть';
    
    let t530__text = document.querySelectorAll('.t530__text');
    let element = document.createElement("div");
    element.className = "t530__btn";
    for (let i = 0; i < t530__text.length; i++) {
        let element = document.createElement("div");
        element.innerText = beforeTxt;
        element.className = "t530__btn t-text t-name_xs";
        t530__text[i].insertAdjacentElement('afterEnd', element);
    };
    
    let t530__btn = document.querySelectorAll('.t530__btn');
    for (let i = 0; i < t530__btn.length; i++) {
        t530__btn[i].addEventListener('click', function() {  
        let hideText = this.previousElementSibling;    
        hideText.classList.toggle('show-txt');
        this.innerText = (this.innerText === beforeTxt) ? this.innerText = afterTxt : this.innerText = beforeTxt;
        });
    };
})();

});
</script>

<style>
.t530__descr { 
    color: #000;
    margin-top: 10px;
}
.t530__text , .t530__descr{ font-size: 15px}
.t530__text {display: none}
.t530__text.show-txt{ display: block}
.t530__text { margin-top: 0}    
.t530__btn {
    margin-top: 10px;
    text-decoration: underline;
    cursor: pointer;
}
@media screen and (max-width: 1200px){
.t530__text , .t530__descr{ font-size: 14px}
}
@media screen and (max-width: 640px){
.t530__text , .t530__descr{font-size: 12px}
}
</style>
Made on
Tilda