Кнопка «Подробнее» для длинного текста

Тильда периодически что-то меняет, поэтому в Zero-блоках модификация может работать некорректно! Если у вас она не работает так, как нужно, попробуйте изменить подход и использовать вместо Zero-блока какой-то стандартный. Если будут вопросы, пишите в чат, а если появится необходимость в платной доработке, то оставьте заявку.

Хотите скрыть огромный текст на странице в кнопку «Подробнее»? С помощью этого скрипта, такое сделать будет очень легко. Пример работы скрипта в стандартном блоке можно посмотреть ниже, а как ведёт себя Zero-блок с раскрывающимся внутри текстом, видно тут.

Здесь будет много текста, чтобы после второй строки появилась кнопка «Подробнее». И не забывайте, что в Тильде можно сделать практически всё, что угодно! Для этого вы можете использовать сторонние скрипты, например с нашего сайта necodim.ru. Желаем успехов в веб-разработке, пусть ваши проекты, сделанные с помощью Tilda Publishing выглядят превосходно.

Чтобы воспользоваться скриптом, вставьте селекторы блока и элемента (селектор — это ID или classname). Как их найти читайте тут.

Помимо этого укажите скорость анимации и то, сколько строк должно быть видно до кнопки «Подробнее». Если в вашем тексте их больше, то кнопка появится, если столько же или меньше, то кнопки не будет), пропишите, что должно быть написано в кнопках «Подробнее» и "Скрыть", а также укажите скорость раскрытия блока.

Если вы используете Zero-блок, то не забудьте самостоятельно добавить класс текстовому элементу и указать его в настройках ниже. Внимание! Высота Zero-блока меняется вместе с высотой текстового элемента, поэтому другие элементы, находящиеся рядом с текстом, могут также скрыться. Чтобы такого не происходило, добавьте оба текста в единую flex-группу. Если тексты находятся внутри карточек, то и сами карточки должны быть внутри flex-группы.

Не забудьте самое главное правило: блок T123 со скриптом необходимо размещать под задействованными элементами или в самом конце страницы.

Пример работы модификации в Zero-блоке в самом низу страницы.

Настроить вид кнопки «Подробнее»

<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->

 <script> 
(() => {
    const OPTIONS = {
        selector: {
            block: '#rec1234567890', // ID или className блока (обязательно с # или .)
            element: '.t-text', // ID или className элемента с текстом (обязательно с # или .)
        },
        lines: 1, // количество видимых строк до кнопки «Раскрыть»
        speed: 300, // скорость
        text: {
            more: 'Подробнее', // текст в кнопке «Раскрыть»
            less: 'Скрыть', // текст в кнопке «Скрыть»
        },
    };
 function initBlock(block) {
        const texts = block?.querySelectorAll(OPTIONS.selector.element);
        
        if (!block || texts.length === 0) {
            return;
        }
        
        texts.forEach(text => {
            const rowHeight = Math.round(parseInt(getComputedStyle(text).lineHeight, 10));
            const collapsedHeight = rowHeight * OPTIONS.lines;
            
            if (text.scrollHeight <= collapsedHeight) {
                return;
            }
        
            let isExpanded = false;
            const textClasses = text.getAttribute('class');
            text.style.maxHeight = `${collapsedHeight}px`;
            text.style.overflow = 'hidden';
            text.style.transition = `max-height ${OPTIONS.speed}ms ease-out`;
        
            const button = document.createElement('a');
            button.href = '#';
            button.className = `${textClasses} t-text read-more`;
            button.textContent = 'Подробнее';
            text.parentNode.insertBefore(button, text.nextSibling);
        
            button.addEventListener('click', (e) => {
                e.preventDefault();
                isExpanded = !isExpanded;
                
                if (isExpanded) {
                    text.style.maxHeight = `${text.scrollHeight}px`;
                    button.textContent = OPTIONS.text.less;
                    button.classList.replace('read-more', 'read-less');
                } else {
                    text.style.maxHeight = `${collapsedHeight}px`;
                    button.textContent = OPTIONS.text.more;
                    button.classList.replace('read-less', 'read-more');
                }
            });
        });
    }
    
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll(OPTIONS.selector.block).forEach(block => {
            initBlock(block);
        });
    });
})();
 </script>

Скопировать код

Рекомендуем добавлять примерно 40px к высоте Zero-блока в настройках артборда, т.к. кнопка «Подробнее» не учитывается. Авто-высотой пользуйтесь с осторожностью, она работает медленно.

Если по какой-то причине в Zero-блоке у вас кнопка «Подробнее» не скрывает текст, а помещается под него, проверьте настройки текстового блока. У него должен быть задан параметр line-height (высота строки). В Zero-блоке за это отвечает Spacing (первое значение).

Для применения модификации к нескольким блокам с разными классами элементов продублируйте блок T123 и замените в нём селекторы блока и элемента. Не забывайте, что селекторы должны быть с «#» у ID и с «.» у классов.

Пример работы модификации

Ниже два Zero-блока для наглядного представления функционала. Жмакай «Подробнее»

Для чего нужен NoCode? Вроде бы лёгкий вопрос, но на самом деле он таит в себе множество ответов. И все они будут правильные.
К примеру, взять Tilda. В 2017 году, когда тильдой пользовались единицы, никто даже и не думал называть это ноукодом. А всё потому, что такого слова в то время почти никто не знал. Но на самом же деле Тильда – это самый яркий образец ноукод-сервиса. Для тех, кто используют здесь блок T123, поправочка, для вас Тильда – это low-code :)
«Хорошо, с этим разобрались. Но не сайтами же едиными?» – спросит любознательный читатель. Верно! С помощью no-code (или low-code) можно собирать чат-ботов, приложения, базы данных, автоматизации и многое другое.
Если обобщить всё вышесказанное, то nocode-сервисы позволяют без знаний кода (в случае с low-code с базовыми знаниями) собрать работающий продукт, будь то сайт, приложение, чат-бот или что-то другое.

Это Zero-блок

Тут работает код, позволяющий скрывать огромное полотно текста, добавляя к нему кнопку «Подробнее». Но ключевая фишка в другом! При нажатии на кнопку, сам блок меняет высоту.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna duis convallis convallis tellus id interdum. Mi eget mauris pharetra et ultrices neque ornare aenean euismod. A pellentesque sit amet porttitor eget dolor morbi. Quisque sagittis purus sit amet volutpat consequat mauris nunc. Auctor eu augue ut lectus arcu bibendum at varius. Et netus et malesuada fames ac. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Laoreet id donec ultrices tincidunt arcu. Nunc consequat interdum varius sit. Lobortis mattis aliquam faucibus purus in massa tempor.

Bibendum at varius vel pharetra vel. Bibendum enim facilisis gravida neque convallis a cras semper. Pellentesque habitant morbi tristique senectus. Lorem mollis aliquam ut porttitor leo. Adipiscing commodo elit at imperdiet dui accumsan sit amet nulla. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Aliquam id diam maecenas ultricies mi. Sit amet volutpat consequat mauris nunc congue nisi. Leo a diam sollicitudin tempor id eu nisl nunc mi. Sapien pellentesque habitant morbi tristique senectus et netus.

Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ut consequat semper viverra nam. Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Nunc sed augue lacus viverra vitae congue. Cursus metus aliquam eleifend mi in nulla. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Habitant morbi tristique senectus et. Gravida quis blandit turpis cursus in hac. Etiam tempor orci eu lobortis elementum nibh. Tempor orci dapibus ultrices in iaculis nunc sed. Sollicitudin nibh sit amet commodo nulla facilisi nullam. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Donec massa sapien faucibus et molestie ac. Quisque egestas diam in arcu. Nunc eget lorem dolor sed. Orci a scelerisque purus semper eget duis at tellus at. Morbi quis commodo odio aenean. Consequat semper viverra nam libero.