Длинные текстовые полотна и тяжелые каталоги перегружают мобильную верстку. С помощью этого руководства ты сможешь компактно свернуть любую секцию или текстовый плагин до фиксированной высоты и добавить кнопку плавного раскрытия, которая динамически меняет надпись с «Показать больше» на «Скрыть».
1 Назначение суффикса класса скрываемому контенту
Открой страницу в редакторе Gridbox, перейди в настройки плагина или колонки, которую нужно свернуть (например, плагин «Текст»), и в поле Class Suffix добавь класс:
Class Suffix (Контент)
show-more-content2 Добавление плагина «Кнопка» и назначение класса
Добавь под скрываемым текстом плагин Кнопка (Button), задай исходный текст «Показать больше», перейди в настройки кнопки и в поле Class Suffix укажи:
Class Suffix (Кнопка)
show-more-button3 Ограничение высоты и стилизация анимации (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и добавь стили для ограничения блока и плавного перехода:
CSS
/* Свернутое состояние контента */.show-more-content { max-height: 200px; overflow: hidden; position: relative; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);}/* Развернутое состояние по клику */.show-more-content.is-open { max-height: 3000px;}/* Нижний градиентный фейд (затухание) в свернутом виде */.show-more-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); pointer-events: none; transition: opacity 0.3s ease;}/* Отключение фейда при полном раскрытии */.show-more-content.is-open::after { opacity: 0;}4 Управление раскрытием и сменой надписи (JavaScript)
Перейди во вкладку Инструменты ➝ Редактор кода ➝ JavaScript и добавь скрипт обработки клика:
JavaScript
document.addEventListener('DOMContentLoaded', () => { const triggerButtons = document.querySelectorAll('.show-more-button a'); triggerButtons.forEach(btn => { const textSpan = btn.querySelector('span') || btn; const initialText = textSpan.innerText.trim(); const collapseText = 'Скрыть'; // Текст кнопки в открытом состоянии btn.addEventListener('click', (e) => { e.preventDefault(); // Поиск связанного контейнера с контентом const parentBlock = btn.closest('.ba-grid-column') || btn.closest('.ba-section'); const targetContent = parentBlock ? parentBlock.querySelector('.show-more-content') : document.querySelector('.show-more-content'); if (!targetContent) return; targetContent.classList.toggle('is-open'); btn.classList.toggle('is-active'); if (targetContent.classList.contains('is-open')) { textSpan.innerText = collapseText; } else { textSpan.innerText = initialText; } }); });});Обрати внимание:
Если фоновый цвет твоей секции отличается от белого (например, темная тема), измени цвет нижнего затухания в CSS-селекторе .show-more-content::after на соответствующий цвет фона (например, rgba(15, 23, 42, 1)).