Как сделать раскрытие текста отзыва в TS205 в Tilda
Our clients love us
- Sarah LewinIt 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 WillsonThe 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
- Alex LarkinsWe 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>
