Как сделать сокращённый текст в ZeroBlock в Tilda

We are cute

The smartest people work every day to provide the best service and to make our clients happy

Max Holden

Founder & Art Director

Max invented our company. He is the father of our main goals and values. He has founded first core members of our team and helped them to show their unique talents in work process.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat.

Как сделать сокращённый текст в ZeroBlock в Tilda

1

Создали 3 текстовых элемента Text в ZeroBlock и добавили текст (первый будет видно изначально, второй покажется по клику, третий это элемент для управления)

2

У третьего текста написали слово Read more и задали этому элементу класс show-more-btn

3

Все 3 элемента объединили в auto layout, вертикальное расположение
и задали ему класс shorten-text

4

Для данного Zero установлено значение высоты на auto

5

Добавили код на страницу, в блок Другое - Т123
В коде прописали изменяемые слова
backText = "Hide";

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём скрытый текст, который показывается с подменой основного текста.

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const backText = "Hide"; //Текст при клике
        const samePlace = false; //Показывать Текст в одном месте true/false
        
        const shortenElements = document.querySelectorAll('.shorten-text');

        if (shortenElements.length > 0) {
            shortenElements.forEach(element => {
                element.classList.add('close-text');
                if(samePlace) element.classList.add('same-place-text');
            });
        }

        const showMoreButtons = document.querySelectorAll('.show-more-btn');
        
        if (showMoreButtons.length > 0) {
            showMoreButtons.forEach(button => {
                button.addEventListener('click', function(event) {
                    this.classList.toggle('show-more-btn-active');

                    const parentShortenText = this.closest('.shorten-text');
                    
                    if (parentShortenText) {
                        if (parentShortenText.classList.contains('close-text')) {
                            parentShortenText.classList.remove('close-text');
                        } else {
                            parentShortenText.classList.add('close-text');
                        }
                    }
                    const tnAtomElement = this.querySelector('.tn-atom');
                    
                    if (tnAtomElement) {
                        if (!tnAtomElement.hasAttribute('data-original-text')) {
                            const originalText = tnAtomElement.textContent;
                            tnAtomElement.setAttribute('data-original-text', originalText);
                        }

                        const currentText = tnAtomElement.textContent;
                        const originalText = tnAtomElement.getAttribute('data-original-text');
                        
                        if (currentText === backText) {
                            tnAtomElement.textContent = originalText;
                        } else {
                            tnAtomElement.textContent = backText;
                        }
                    }
                    
                    const artboard = this.closest('.t396__artboard');

                    if (artboard && artboard.getAttribute('data-artboard-heightmode') === 'hug') {
                        if (typeof t396__updateAutoHeight === 'function') {
                            t396__updateAutoHeight(artboard);
                        } else {
                            console.warn('Функция t396__updateAutoHeight не найдена');
                        }
                    }
                });
            });
        }
        
    })();    
});    
</script>

<style>
.show-more-btn .tn-atom {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#allrecords .show-more-btn .tn-atom:hover {
    color: #ff9999;
}    

#allrecords .shorten-text.close-text .tn-elem:not(:first-child):not(.show-more-btn) {
    display: none;
}

#allrecords  .shorten-text.same-place-text:not(.close-text) .tn-elem:first-child {
    display: none;
}


</style>