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

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

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

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

Если вы используете Zero-блок, то не забудьте самостоятельно добавить класс текстовому элементу и указать его в настройках ниже. Внимание! Высота Zero-блока меняется вместе с высотой текстового элемента, поэтому другие элементы, находящиеся рядом с текстом, могут также скрыться. Если вам это не нужно, удалите из кода строки: 14−20, 26−36.

Если вы хотите таким образом скрывать текст описания в товарах, то необходимо воспользоваться этим скриптом (настройки делаются в одной и той же форме ниже, только вам не нужно будет настраивать первые 3 параметра — их можно оставить любыми). Его нужно разместить в футере всего сайта, скопировать ID блока, создать страницу футера для товара, вставить туда Alias блок, прописать в нем скопированный ID и в каталоге прикрепить футер к товарам (галочка «Открывать товар на отдельной странице» не обязательна). После этого опубликуйте все страницы.

Также можете воспользоваться дополнительными рекомендациями:
  1. В настройках артборда выберите «Автоматическая высота». При желании добавьте нижний внутренний отступ.
  2. Выделите текстовый элемент с классом, добавьте его в группу (нажмите «Сгруппировать»), после чего выберите такие настройки: Группа → Объект, Флекс → Авто.

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

Пример работы модификации в Zero-блоке в самом низу страницы.
<!-- Кнопка «Подробнее» для длинного текста | 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>',
        afterToggle: function() { window.dispatchEvent(new Event('resize')) },
    });
});
</script>
Скопировать код
Если по какой-то причине в Zero-блоке у вас кнопка «Подробнее» не скрывает текст, а помещается под него, проверьте настройки текстового блока. У него должен быть задан параметр line-height (высота строки). В Zero-блоке за это отвечает Spacing (первое значение).
Код для товаров

<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
 <script>
 const makeReadmore = (target) => {
 const rowHeight = Math.round(parseFloat(target.css('line-height').split('px')[0], 10));
        collapsedHeight = rowHeight * 3,
        longTextClasses = target.attr('class');
    target.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>',
        afterToggle: function() { window.dispatchEvent(new Event('resize')) },
    });
}

$('.js-store-prod-btn').click(function() {
    if ($(this).attr('href').indexOf('tproduct') !== -1) {
        setTimeout(() => {
            let block = $('.t-store__product-popup'),
                longText = block.find($('.js-store-prod-all-text'));
            makeReadmore(longText);
        }, 500);
    }
});

if (window.location.href.indexOf('tproduct') !== -1) {
    setTimeout(() => {
        let block = $('.t-store__product-snippet'),
            longText = block.find($('.js-store-prod-all-text'));
        makeReadmore(longText);
    }, 500);
}
</script>
Скопировать код
Код для группы элементов в Zero-блоке
Второй пример реализован по другой схеме. Чтобы сделать подобное, необходимо будет воспользоваться новой функцией Tilda: группировка с автолейаутом. Сгруппируйте необходимые элементы, задайте всем вашим текстам один и тот же класс collapsed, настройте отступы, фон, скругление углов для группы и другие настройки, а затем скопируйте код, представленный ниже (настройки для него в форме выше).
<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-atom -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
 <script>

$('#rec736896306 .t396__artboard').on('artBoardRendered', function() {
 const speed = 200;
    const artboard = $(this);
    const carrier = $(this).find('.t396__carrier');
    const filter = $(this).find('.t396__filter');
    const elem = $(this).find($('.collapsed'));
    const atom = elem.find($('.tn-atom'));
    const group = elem.closest($('.tn-group'));
    const rowHeight = Math.round(parseInt(atom.css('line-height'),10));
    const collapsedHeight = rowHeight * 3;
    
    artboard.css('transition', `height ${speed}ms ease`);
    carrier.css('transition', `height ${speed}ms ease`);
    filter.css('transition', `height ${speed}ms ease`);
    group.css('height', 'auto');
    elem.css({'display': 'flex', 'flex-direction': 'column'});

    function adjustArtboardHeight() {
        const interval = setInterval(() => {
            artboard.height(group.height());
            artboard.attr('data-artboard-height', group.height());
            artboard.attr('data-artboard-proxy-min-height', group.height());
            artboard.attr('data-artboard-proxy-max-height', group.height());
            carrier.height(group.height());
            filter.height(group.height());
        }, 50);
        setTimeout(() => clearInterval(interval), speed + 100);
    }

    atom.readmore({
        speed: speed,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
        lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>',
        beforeToggle: function() {
            adjustArtboardHeight();
        }
    });
    
    adjustArtboardHeight();
});
</script>
Скопировать код
Если вам необходимо добавить кнопку «Подробнее» к нескольким блокам с разными классами, вы всегда можете обратиться за помощью. Если хочется поэкспериментировать самостоятельно, то попробуйте продублировать блок T123 и заменить в нём ID и class элемента.
Пример работы модификации
Ниже два Zero-блока для наглядного представления функционала. Жмакай «Подробнее»
Для чего нужен NoCode? Вроде бы лёгкий вопрос, но на самом деле он таит в себе множество ответов. И все они будут правильные.
К примеру, взять Tilda. В 2017 году, когда тильдой пользовались единицы, никто даже и не думал называть это ноукодом. А всё потому, что такого слова в то время почти никто не знал. Но на самом же деле Тильда – это самый яркий образец ноукод-сервиса. Для тех, кто используют здесь блок T123, поправочка, для вас Тильда – это low-code :)
«Хорошо, с этим разобрались. Но не сайтами же едиными?» – спросит любознательный читатель. Верно! С помощью no-code (или low-code) можно собирать чат-ботов, приложения, базы данных, автоматизации и многое другое.
Если обобщить всё вышесказанное, то nocode-сервисы позволяют без знаний кода (в случае с low-code с базовыми знаниями) собрать работающий продукт, будь то сайт, приложение, чат-бот или что-то другое.
Это Zero-блок
Тут работает код, позволяющий скрывать огромное полотно текста, добавляя к нему кнопку «Подробнее». Но ключевая фишка в другом! При нажатии на кнопку, сам блок меняет высоту.
Made on
Tilda