Пряталки текста — «Показать ещё»

Шесть способов спрятать часть текста под кнопку. Бейджи у каждого показывают, нужен ли JS и можно ли прятать блок с картинками. Демо рабочие — кликайте.

Главное правило SEO: во всех примерах спрятанный текст физически лежит в HTML с самого начала — поисковик читает его целиком. Прячется только визуально (CSS), а не подгружается по клику. Единственный неправильный способ — тянуть хвост текста с сервера по нажатию: тогда в исходном HTML его нет.

1 Голый <details> — ноль CSS и JSБез JSс картинками

Нативный HTML. Доступность, клавиатура, раскрытие по Ctrl+F — всё из коробки. Выглядит по-браузерному, зато писать нечего.

Санаторий в сосновом бору на берегу озера, мягкий климат круглый год.

Профиль лечения — опорно-двигательный аппарат и нервная система: минеральные ванны, грязелечение, физиотерапия, бассейн с термальной водой. Этот абзац всё время в DOM — поисковик его видит.

Показать код

<details>
  <summary>Показать больше</summary>
  <p>Скрытый текст. Всегда в DOM — поисковик читает.</p>
</details>

2 Своя кнопка-ссылка со стрелкойБез JSс картинками

Тот же <details>, но убран треугольник-маркер и нарисована своя кнопка «Читать далее ⌄», которая меняется на «Свернуть». По-прежнему без JS.

Санаторий в сосновом бору на берегу озера, мягкий климат круглый год.

Читать далееСвернуть⌄

Профиль лечения — опорно-двигательный аппарат и нервная система. Минеральные ванны, грязелечение, физиотерапия, бассейн с термальной водой. Текст в DOM независимо от того, раскрыт блок или нет.

Показать код

<details class="rm2">
  <summary>
    <span class="more">Читать далее</span>
    <span class="less">Свернуть</span>
    <span class="chev">⌄</span>
  </summary>
  <p>Скрытый текст…</p>
</details>

/* CSS */
.rm2 summary { list-style: none; cursor: pointer; color: #2f6fd0; font-weight: 600; }
.rm2 summary::-webkit-details-marker { display: none; }
.rm2 .chev { transition: transform .2s; }
.rm2[open] .chev { transform: rotate(180deg); }
.rm2 .less { display: none; }
.rm2[open] .more { display: none; }
.rm2[open] .less { display: inline; }

3 Кнопка + плавная анимация раскрытияБез JSс картинками

Современный CSS анимирует высоту через ::details-content + interpolate-size (Chrome 129+, поддержка растёт). Где не поддерживается — просто откроется мгновенно, ничего не сломается.

Санаторий в сосновом бору на берегу озера, мягкий климат круглый год.

Читать далееСвернуть⌄

Профиль лечения — опорно-двигательный аппарат и нервная система. Минеральные ванны, грязелечение, физиотерапия, бассейн с термальной водой.

Питание диетическое по назначению врача, номера с балконами и видом на озеро. Высота плавно анимируется при открытии и закрытии.

Показать код

:root { interpolate-size: allow-keywords; }
.rm3::details-content {
  block-size: 0; overflow: hidden; content-visibility: hidden;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.rm3[open]::details-content { block-size: auto; content-visibility: visible; }

4 Обрезка по строкам + градиент (line-clamp)С JSтолько текст

Текст обрезается на N строк с плавным «затуханием» снизу, кнопка раскрывает целиком. Нужна капелька JS для переключения класса. Хорошо для сплошного текста, когда важна ровная высота превью. Единственный вариант только для текста: line-clamp обрезает строки, картинку-блок внутри он не поймёт — для смеси «текст + фото» бери обрезку по max-height или <details>.

Санаторий расположен в сосновом бору на берегу озера, климат мягкий круглый год. Профиль лечения — опорно-двигательный аппарат и нервная система. В распоряжении гостей минеральные ванны, грязелечение, физиотерапия и бассейн с термальной водой. Питание диетическое по назначению врача. Номера с балконами и видом на озеро, рядом терренкур и прокат инвентаря.

Показать код

/* CSS: обрезаем на 3 строки, снизу градиент */
.body.collapsed .text {
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

// JS: клик по кнопке снимает класс collapsed
btn.addEventListener("click", () => {
  const body = el.querySelector(".body");
  const open = !body.classList.toggle("collapsed");
  btn.querySelector(".lbl").textContent = open ? "Свернуть" : "Показать полностью";
});

5 Тизер + «отсечка» на div + кнопкеС JSс картинками

Первые абзацы видны сразу, хвост — под кнопкой. Обычный <div> + <button>: у него нет встроенного состояния, поэтому JS переключает класс open. Кнопка исчезает после раскрытия. Ниже (№6) — та же идея без JS.

Санаторий расположен в сосновом бору на берегу озера, климат мягкий круглый год. Профиль лечения — опорно-двигательный аппарат и нервная система.

В распоряжении гостей минеральные ванны, грязелечение, физиотерапия и бассейн с термальной водой. Питание диетическое по назначению врача.

Номера с балконами и видом на озеро, рядом терренкур, библиотека и прокат спортивного инвентаря. Трансфер от вокзала по предварительной заявке.

Показать код

<div class="cut">
  <p>Видимый тизер…</p>
  <div class="tail">         <!-- всё после отсечки -->
    <p>Скрытый хвост, но он В DOM — SEO видит.</p>
  </div>
  <button class="btn">Показать полностью</button>
</div>

.cut .tail { display: none; }
.cut.open .tail { display: block; }
.cut.open .btn { display: none; }
// btn.onclick → el.classList.add("open")

6 Тизер + отсечка на <details> — то же, но без JSБез JS ✓с картинками

Та же логика, что в №5, но на нативном теге: видимый тизер снаружи, весь хвост внутри <details>, а <summary> оформлен кнопкой (переиспользую стили и анимацию из №3). Для проекта рекомендую именно этот вариант — меньше кода, доступность и раскрытие по Ctrl+F бесплатно, а хвост всё так же в DOM для поисковика.

Показать полностьюСвернуть⌄

Показать код

<p>Видимый тизер…</p>          <!-- снаружи, всегда видно -->
<details>
  <summary>Показать полностью</summary>
  <p>Хвост после отсечки — в DOM, SEO видит.</p>
</details>

/* дальше — стили кнопки из №2 и анимация из №3, JS не нужен */