Описание по клику Тильда: раскрывающийся текст в карточке и блоке

Описание по клику Тильда делается тремя путями: тегом details в блоке T123, готовым блоком-аккордеоном или небольшим скриптом, который сворачивает длинное описание товара в каталоге. Какой путь выбрать, зависит от того, где лежит текст: в обычном блоке, в Zero Block или в карточке товара. Ниже я разбираю каждый случай с кодом, который вставляется без правки движка Тильды, и с ошибками, на которых сам спотыкался.

Описание по клику: четыре способа и чем они отличаются

Прежде чем писать код, определитесь, что именно нужно сворачивать. От этого зависит и способ, и место вставки.

Готовый блок-аккордеон я проверяю первым: если он закрывает задачу, код не нужен вообще. Номер и набор вариаций смотрю прямо в библиотеке блоков, они меняются. Обычно после первой же правки дизайна (свои цвета, иконка, отступы) я перехожу на details, потому что там вся стилизация у меня в руках.

Вставка своего кода доступна на платных тарифах, Personal и Business. Актуальный состав тарифов смотрите на странице тарифов самой Тильды.

Раскрывающийся текст в блоке: details в T123

Самый надёжный вариант для лендинга: тег details с вложенным summary. Браузер сам раскрывает и сворачивает содержимое, JavaScript не нужен, поэтому нечему ломаться при обновлении скриптов Тильды. Блок T123 («HTML-код») лежит в библиотеке блоков в категории «Другое».

Добавляете T123, вставляете код, публикуете страницу:

<details class='tw-item'>
  <summary>Состав и уход</summary>
  <div class='tw-item__body'>
    Хлопок 100%, стирка при 30 градусах, не отбеливать.
  </div>
</details>

<details class='tw-item'>
  <summary>Сроки и стоимость доставки</summary>
  <div class='tw-item__body'>
    Доставка СДЭК до пункта выдачи, стоимость считается в корзине.
  </div>
</details>

<style>
.tw-item { border-bottom: 1px solid #ddd; padding: 16px 0; }
.tw-item summary { cursor: pointer; font-weight: 600; list-style: none; }
.tw-item summary::-webkit-details-marker { display: none; }
.tw-item summary::after { content: '+'; float: right; }
.tw-item[open] summary::after { content: '-'; }
.tw-item__body { padding-top: 12px; line-height: 1.5; }
</style>

Что здесь стоит знать:

• Строка list-style: none и правило для ::-webkit-details-marker убирают штатный треугольник, а плюс и минус рисует псевдоэлемент.
• Чтобы вопрос был открыт при загрузке, добавьте атрибут open в тег details.
• Стили лежат в том же T123. Если аккордеонов на странице несколько, один раз вынесите style в первый блок, остальные его подхватят.
• Шрифт подтягивается со страницы, поэтому внутри summary я ничего не задаю, кроме жирности.

Если вопросов десять и больше, держать их в одном T123 удобнее: правится одним куском кода, а не десятью блоками.

Скрытое описание в карточке товара каталога

С каталогом история другая. Описание товара вы вводите в админке каталога, а карточки на сайте собирает скрипт: список приходит с сервера в виде JSON, и вёрстка строится уже в браузере. Поэтому details руками в описание не вставишь, да и нужно это не в одной карточке, а во всех. Решение: один скрипт, который находит блок описания, если он длиннее заданной высоты, обрезает его и добавляет кнопку «Читать полностью».

Место вставки: «Настройки сайта», «Вставка кода», «HTML-код для вставки внутрь head». Код в head сайта срабатывает и на страницах товаров /tproduct/, куда блок T123 не добавить. Класс описания в попапе и на странице товара: .js-store-prod-text.

<style>
.js-store-prod-text { transition: max-height .3s ease; }
.tw-toggle {
  margin-top: 8px; padding: 0; border: 0; background: none;
  color: #000; font-weight: 600; text-decoration: underline; cursor: pointer;
}
</style>
<script>
(function () {
  var SELECTOR = '.js-store-prod-text';
  var MAX_HEIGHT = 90;
  var LABEL_OPEN = 'Читать полностью';
  var LABEL_CLOSE = 'Свернуть';

  function wrap(el) {
    if (el.dataset.twDone || !el.scrollHeight) return;
    el.dataset.twDone = '1';
    if (el.scrollHeight <= MAX_HEIGHT + 20) return;

    el.style.maxHeight = MAX_HEIGHT + 'px';
    el.style.overflow = 'hidden';

    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'tw-toggle';
    btn.textContent = LABEL_OPEN;
    btn.addEventListener('click', function () {
      var open = el.classList.toggle('is-open');
      el.style.maxHeight = (open ? el.scrollHeight : MAX_HEIGHT) + 'px';
      btn.textContent = open ? LABEL_CLOSE : LABEL_OPEN;
    });
    el.parentNode.insertBefore(btn, el.nextSibling);
  }

  function scan() {
    document.querySelectorAll(SELECTOR).forEach(wrap);
  }

  document.addEventListener('DOMContentLoaded', function () {
    scan();
    new MutationObserver(scan).observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['class']
    });
  });
})();
</script>

Почему скрипт устроен именно так:

• MutationObserver нужен потому, что карточка в попапе появляется после клика, а не при загрузке страницы. Обычный запуск на DOMContentLoaded её не увидит.
• Проверка !el.scrollHeight отсекает скрытые блоки: у закрытого попапа высота нулевая, и сворачивать там нечего. Когда окно откроется, сработает наблюдатель.
• Атрибут data-tw-done защищает от повторной обработки, иначе кнопка размножалась бы при каждом изменении страницы.
• Текст не прячется через display: none, он остаётся в разметке и просто обрезан по высоте.
• Порог в 90 пикселей я подбираю по дизайну: примерно четыре строки шрифта среднего размера.

Класс описания в плитке витрины зависит от выбранного блока каталога, поэтому открываю страницу, смотрю элемент в инспекторе и подставляю нужный селектор в SELECTOR, не угадывая. Часто в плитке длинное описание вообще не показывают, и сворачивание нужно только в попапе и на странице товара.

Описание по клику в Zero Block

В Zero Block все элементы стоят на абсолютных координатах. HTML-код в Zero вставляется отдельным элементом: он не настройка текста, а самостоятельный объект на артборде. Внутрь него можно положить тот же details из примера выше.

Тут есть подвох, на который я наткнулся в первый же раз. Высота артборда фиксирована, и элементы ниже аккордеона сами не сдвигаются. Раскрывшийся текст либо наезжает на соседние элементы, либо обрезается рамкой HTML-элемента. Варианты решения такие:

1. Поставить аккордеон в самый низ Zero Block и оставить под ним запас по высоте артборда.
2. Вынести раскрывающийся текст из Zero в отдельный T123 под ним: блоки страницы друг под другом сдвигаются естественно.
3. Для простых случаев сделать два состояния: текст целиком в одном элементе и кнопка рядом, а высоту артборда подобрать под раскрытый вариант.

Второй вариант я выбираю почти всегда. Zero хорош для визуала, но поведение, зависящее от длины текста, ему даётся плохо.

Отдельно про адаптив. Брейкпоинтов в Zero пять: 1200, 980, 640, 480 и 320 пикселей. HTML-элемент на каждом из них можно двигать и растягивать, поэтому на узких экранах проверьте, что ширина элемента не вылезает за артборд, а шрифт внутри summary не слипается.

Что проверить перед публикацией

Раскрывающийся текст выглядит простой задачей, но ломается в мелочах. Мой список перед сдачей:

• Телефон. Нажатие по summary должно срабатывать с первого касания, а зона нажатия быть не меньше высоты строки с отступами. Для этого у summary стоит padding, а не только у обёртки.
• Каталог после «Показать ещё». Если товары подгружаются порциями, наблюдатель должен обработать и новые карточки. Проверяю на витрине, где больше одной страницы товаров.
• Попап товара и прямая ссылка. Описание рендерится по-разному в попапе и на странице /tproduct/, поэтому открываю оба варианта.
• Кэш. После правки кода в head нужно переопубликовать страницы. Я проверяю в режиме инкогнито, чтобы не смотреть на старую версию.
• Короткие описания. Кнопка «Читать полностью» не должна появляться под двумя строками текста. В скрипте это решает порог высоты.
• Содержимое в разметке. Текст сворачивается высотой или тегом details, а не удаляется из страницы. Для поиска и для читалок это важно: контент на месте, просто визуально свёрнут.
• Клавиатура. Тег details раскрывается с клавиатуры из коробки. В скриптовом варианте используется настоящая кнопка button, а не div с обработчиком, поэтому фокус и клавиша Enter работают без доработок.

Ещё одна частая проблема: клиент вставляет в описание товара длинный текст с абзацами и списками, и высота считается до подгрузки шрифтов. Если шрифт сайта свой, высота может измениться после загрузки, и кнопка появится не там, где ожидали. Тогда я запускаю scan повторно через небольшую задержку после загрузки страницы либо оставляю запас в пороге.

Когда проще заказать доработку

Один-два аккордеона на лендинге вы соберёте сами по примеру выше. Сложнее, когда нужна логика на весь каталог: разный порог для разных разделов, плавная анимация с иконкой, раскрытие по якорю из ссылки, сохранение состояния. В таких случаях я беру задачу как кастомный скрипт для Tilda: простая доработка стоит от 3 000 ₽, цена растёт, если нужно согласовывать поведение с уже установленными на сайте скриптами.

Перед заказом полезно подготовить три вещи: ссылку на страницу, где нужно сворачивать текст, пример самого длинного описания и скриншот того, как это должно выглядеть на телефоне. С этим набором оценка занимает одно сообщение.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их в справке самого сервиса.

Частые вопросы

Можно ли сделать описание по клику без кода?

Да, если подходит готовый блок-аккордеон из библиотеки блоков Тильды. Он настраивается через контент и оформление блока. Когда нужно свернуть описание товара в каталоге или подогнать вид под дизайн, без небольшого кода уже не обойтись.

Работает ли код из статьи на бесплатном тарифе?

Вставка собственного HTML-кода входит в платные тарифы, Personal и Business. Свой код в head сайта и блок T123 я рассчитываю использовать именно на них. Состав тарифов проверяйте на странице тарифов Тильды, он может измениться.

Почему кнопка «Читать полностью» не появляется в попапе товара?

Чаще всего причина в том, что селектор не совпадает с классом описания на вашей витрине или скрипт отработал до появления текста. Откройте попап, найдите блок описания в инспекторе и сверьте класс с переменной SELECTOR. Если код вставлен в head и страница переопубликована, наблюдатель подхватит блок сразу после его появления.

Влияет ли скрытое описание на индексацию?

В обоих способах текст остаётся в разметке страницы, он только свёрнут визуально. Я не удаляю его скриптом и не прячу через display: none там, где это можно обойти, а как именно поисковики оценивают свёрнутый текст, проверяйте по документации Яндекса и Google.