Регистрация
Личный кабинет
Регистрация
Личный кабинет

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

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

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

Если вы используете Zero-блок, то не забудьте самостоятельно добавить класс текстовому элементу и указать его в настройках ниже. Внимание! Высота Zero-блока меняется вместе с высотой текстового элемента, поэтому другие элементы, находящиеся рядом с текстом, могут также скрыться. Если вам это не нужно, удалите из кода строки: 14−20, 26−36.
<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
$(document).ready(function() {
    let block = $('#rec123456789'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 3,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more">Подробнее</a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less">Скрыть</a>'
    });
});
</script>
Скопировать код
Если по какой-то причине в Zero-блоке у вас кнопка «Подробнее» не скрывает текст, а помещается под него, проверьте настройки текстового блока. У него должен быть задан параметр line-height (высота строки). В Zero-блоке за это отвечает Spacing (первое значение).

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