В проектах на 1С-Битрикс нередко возникает задача скрывать часть текста за кнопкой «Показать ещё». Такой подход упрощает восприятие длинных описаний, инструкций или новостных публикаций. Реализовать механизм можно без сторонних модулей – достаточно добавить HTML-разметку и несколько строк JavaScript.
Для создания сворачиваемого блока потребуется выделить контейнер с текстом, задать ему фиксированную высоту и свойство overflow: hidden. При клике на кнопку будет меняться CSS-класс, который открывает или скрывает содержимое. Этот метод универсален и подходит для любых шаблонов Битрикс, включая компоненты news.detail и catalog.section.
Особое внимание стоит уделить кросс-браузерности и работе с адаптивной версткой. Чтобы блок корректно отображался на мобильных устройствах, лучше использовать max-height вместо фиксированных значений. Также полезно предусмотреть плавную анимацию раскрытия, что достигается с помощью CSS-переходов.
Дальнейшие шаги включают настройку кнопки переключения и добавление условий для скрытия элемента, если текст изначально короткий. Такой подход избавляет интерфейс от лишних элементов и делает работу сайта удобнее.
Подключение пользовательского JavaScript к шаблону сайта
В Битрикс корректнее подключать скрипты через шаблон, чтобы они загружались централизованно и не терялись при обновлениях. Основной файл для подключения – header.php в директории шаблона /bitrix/templates/имя_шаблона/.
Пример подключения собственного файла:
<?php
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/custom.js");
?>
Файл custom.js необходимо разместить в папке /js/ внутри шаблона. Если каталога нет – создать вручную.
Чтобы избежать дублирования и конфликтов, рекомендуется использовать метод AddHeadScript, а не вставку через <script> в коде. При этом Bitrix автоматически добавит путь к файлу в общий стек подключений.
Основные методы подключения:
| Метод | Описание | Когда применять |
|---|---|---|
AddHeadScript() |
Подключение JS в секцию <head> | Для библиотек и глобальных скриптов |
SetAdditionalCSS() |
Подключение CSS в шаблон | Совместно с JS при использовании плагинов |
Asset::getInstance()->addJs() |
Современный способ подключения через менеджер ресурсов | Для оптимизации загрузки и кеширования |
Рекомендуется использовать Asset::getInstance() в новых проектах, так как он поддерживает композитный режим и объединяет ресурсы для ускорения сайта:
<?php
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/js/custom.js");
?>
Создание разметки блока с заголовком и скрытым текстом
Для формирования структуры достаточно использовать контейнер с двумя элементами: заголовок, который будет выполнять роль переключателя, и контентный блок со скрытым текстом.
Пример минимальной разметки:
<div class="toggle-block">
<div class="toggle-title">Подробнее о сервисе</div>
<div class="toggle-content">
<p>Здесь находится дополнительная информация, изначально скрытая от пользователя.</p>
</div>
</div>
Класс toggle-title должен быть кликабельным. Элемент toggle-content необходимо оставлять в структуре всегда, чтобы его можно было раскрыть с помощью JavaScript. Внутри блока допускается использовать параграфы, списки и любые текстовые элементы, которые должны скрываться вместе.
Такой подход обеспечивает универсальность: разметка не зависит от стилей и скриптов, их можно подключить отдельно для управления отображением.
Использование CSS для управления состоянием блока
Для сворачивания и разворачивания блока без скриптов достаточно применить скрытый чекбокс и псевдоклассы. Такой подход не нагружает страницу и корректно работает во всех современных браузерах.
- Добавьте скрытый
<input type="checkbox">, связанный с заголовком через атрибутfor. - Назначьте блоку класс с максимальной высотой и свойством
overflow: hiddenдля состояния «свернуто». - Используйте селектор
:checked ~ .blockдля изменения стилей при активном чекбоксе. - Добавьте анимацию через
transitionдля плавного раскрытия.
Пример CSS:
.toggle-block { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }input:checked ~ .toggle-block { max-height: 500px; }label { cursor: pointer; display: inline-block; }
Значение max-height задаётся больше предполагаемого контента. При необходимости используйте calc() для адаптивного управления.
Добавление кнопки-триггера для разворачивания содержимого
Чтобы пользователь мог управлять отображением скрытого блока, требуется кнопка-триггер. В Битрикс её можно разместить в любом месте шаблона компонента или прямо в тексте страницы.
- Создайте кнопку или ссылку с уникальным идентификатором:
<button id="toggle-content">Показать подробнее</button> - Добавьте скрываемый блок с атрибутом
style="display:none;"или классом, управляющим видимостью. - В шаблоне компонента подключите JavaScript для обработки клика:
document.getElementById('toggle-content').addEventListener('click', function() { var block = document.getElementById('hidden-block'); if (block.style.display === 'none') { block.style.display = 'block'; this.textContent = 'Скрыть'; } else { block.style.display = 'none'; this.textContent = 'Показать подробнее'; } });
Рекомендуется использовать data-атрибуты для передачи состояния и текста кнопки, чтобы избежать жёсткой привязки к конкретным идентификаторам.
- Добавьте в кнопку
data-open-textиdata-close-textдля динамической смены надписи. - При множественных блоках используйте общий класс и делегирование событий вместо дублирования кода.
- В шаблонах Битрикс корректнее подключать JS через
$APPLICATION->AddHeadScript(), что исключает проблемы с кэшированием.
Реализация анимации при сворачивании и разворачивании
Для плавного эффекта при изменении состояния блока используйте свойство max-height вместо display: none. Оно поддерживает переходы и позволяет добиться визуально мягкого раскрытия.
Пример CSS:
.toggle-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.4s ease;
}
.toggle-content.active {
max-height: 500px;
}
Значение 500px выбирайте с запасом относительно предполагаемой высоты текста. Если контент динамический, используйте скрипт, который вычисляет фактическую scrollHeight и подставляет его в max-height при разворачивании.
Пример JavaScript:
const block = document.querySelector('.toggle-content');
const btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', () => {
if (block.classList.contains('active')) {
block.style.maxHeight = '0';
block.classList.remove('active');
} else {
block.style.maxHeight = block.scrollHeight + 'px';
block.classList.add('active');
}
});
При необходимости можно добавить transition-timing-function (например, cubic-bezier) для более естественного ускорения и замедления анимации.
Вставка кода блока в компонент или шаблон страницы
Для интеграции сворачиваемого блока в компонент Битрикс необходимо открыть файл шаблона компонента, обычно расположенный в /bitrix/components/имя_компонента/templates/имя_шаблона/template.php.
Создайте HTML-разметку блока с уникальным идентификатором. Например:
<div id=»custom-collapse-block»><h3>Заголовок</h3><div class=»collapse-content»>Содержимое блока</div></div>
Подключите JavaScript для управления сворачиванием. Для компонентов Битрикс рекомендуют использовать метод BX.ready для безопасного вызова скрипта:
<script>
BX.ready(function() {
var block = document.getElementById(‘custom-collapse-block’);
var header = block.querySelector(‘h3’);
var content = block.querySelector(‘.collapse-content’);
content.style.display = ‘none’;
header.addEventListener(‘click’, function() {
content.style.display = (content.style.display === ‘none’) ? ‘block’ : ‘none’;
});
});
</script>
Если блок вставляется в шаблон страницы, его код можно поместить в файл /local/templates/имя_шаблона/header.php, footer.php или отдельный include-файл, подключив его через <?php include $_SERVER['DOCUMENT_ROOT'].'/include/collapse_block.php'; ?>.
Для повторного использования блока внутри нескольких компонентов или страниц рекомендуется вынести HTML и JS в отдельный include-файл, чтобы минимизировать дублирование кода и упростить поддержку.
В компонентах, использующих AJAX, необходимо убедиться, что скрипт инициализации вызывается после полной загрузки контента. В этом случае используется BX.addCustomEvent или перезапуск скрипта внутри события onAjaxSuccess.
Настройка отображения блока через параметры компонента
В настройках компонента сворачиваемого блока необходимо указать уникальный идентификатор блока через параметр BLOCK_ID. Это обеспечит корректную работу JavaScript для открытия и закрытия блока.
Для управления состоянием блока используйте параметр DEFAULT_STATE со значениями expanded или collapsed. Если требуется сохранять состояние между обновлениями страницы, включите SAVE_STATE с true.
Размеры блока регулируются через параметр MAX_HEIGHT. Укажите значение в пикселях, например 300, чтобы при превышении контента блок автоматически добавлял кнопку «Показать больше».
Для текста кнопок раскрытия и сворачивания используйте параметры SHOW_MORE_TEXT и SHOW_LESS_TEXT. Рекомендуется использовать короткие и понятные подписи, например «Подробнее» и «Свернуть».
Если блок должен быть многоуровневым, настройте параметр ALLOW_MULTILEVEL с true. Это позволит вложенным секциям корректно переключать видимость без конфликта идентификаторов.
Для адаптивного отображения на мобильных устройствах укажите параметр MOBILE_COLLAPSE с true, чтобы блок по умолчанию был свернут на экранах шириной менее 768px.
Параметр ANIMATION_SPEED задает скорость раскрытия в миллисекундах. Оптимальное значение 300–500 для плавного эффекта без задержек.
Все параметры передаются через массив $arParams в шаблон компонента. Пример использования: $arParams['BLOCK_ID'] = 'faq_section'; $arParams['DEFAULT_STATE'] = 'collapsed';
Проверка работы на разных устройствах и браузерах
Для сворачиваемого блока важно убедиться в корректном отображении на всех типах устройств. На мобильных телефонах и планшетах проверяйте, чтобы кнопка раскрытия оставалась кликабельной и текст не выходил за границы экрана. Используйте эмуляторы устройств в браузерах Chrome и Firefox, а также физические устройства с iOS и Android.
В разных браузерах обработка JavaScript и CSS может отличаться. Проверьте работу блока в последних версиях Chrome, Firefox, Safari, Edge и Opera. Особое внимание уделите Safari на macOS и iOS: здесь часто возникают проблемы с анимацией и высотой блока.
Проверяйте поведение блока при отключенном JavaScript: текст должен оставаться доступным, даже если кнопка сворачивания не работает. Для этого используйте атрибут noscript или задайте стандартное состояние раскрытого текста.
Тестируйте масштабирование страницы и ориентацию экрана. Блок должен корректно адаптироваться при изменении ширины окна, переходе в портретный или ландшафтный режим. Используйте CSS-свойства max-height и overflow для предотвращения обрезки текста.
Используйте инструменты разработчика в браузерах для проверки событий клика и анимации. В Firefox это вкладка «События», в Chrome – «Event Listeners». Проверка логов консоли поможет выявить ошибки JavaScript, влияющие на работу блока.
Рекомендуется автоматизировать тесты с помощью Selenium или Cypress. Скрипты должны открывать страницу, нажимать на блок и проверять, что высота и видимость текста соответствуют ожидаемым значениям. Это особенно полезно при обновлении шаблона или добавлении новых стилей.
Вопрос-ответ:
Как создать простой сворачиваемый блок на странице Битрикс без использования сторонних модулей?
Для реализации сворачиваемого блока можно использовать стандартные возможности HTML, CSS и немного JavaScript. В HTML создаём контейнер с заголовком и содержимым, а в CSS задаём начальное состояние содержимого (например, display: none). В JavaScript добавляем обработчик клика на заголовок, который будет менять видимость содержимого. Такой способ позволяет полностью контролировать внешний вид блока и его поведение без установки дополнительных компонентов.
Можно ли сделать так, чтобы блок автоматически разворачивался при загрузке страницы, если на нём есть определённая метка?
Да, это можно реализовать с помощью проверки атрибутов или классов при загрузке страницы. Например, можно присвоить заголовку специальный класс data-open=»true» и в скрипте при инициализации проверять его наличие. Если класс найден, содержимое блока отображается сразу, иначе остаётся скрытым. Такой метод удобен, когда необходимо выделить важную информацию для пользователя сразу при входе на страницу.
Как сделать плавное раскрытие и сворачивание блока, чтобы это выглядело аккуратно?
Плавное изменение высоты блока достигается с помощью CSS-свойства transition. Для этого в стилях нужно указать transition для свойства height или max-height. В JavaScript при клике высота содержимого меняется с нуля на фактическую высоту. Такой подход делает анимацию мягкой и приятной для глаза. При работе с большим объёмом текста часто используют max-height с достаточным запасом, чтобы избежать резких обрывов контента.
Можно ли использовать несколько сворачиваемых блоков на одной странице без конфликта скриптов?
Да, это возможно. Нужно каждому блоку присвоить уникальный идентификатор или обрабатывать их через классы с циклом. В JavaScript стоит использовать делегирование событий или перебор всех элементов с определённым классом, чтобы каждому заголовку соответствовал свой блок содержимого. Такой подход гарантирует, что действия с одним блоком не будут влиять на другие, и можно создавать любое количество блоков на странице.
Как добавить иконку, которая меняется при раскрытии и сворачивании блока?
Иконку можно разместить внутри заголовка блока и менять её класс в зависимости от состояния содержимого. Например, при скрытом блоке ставится одна иконка (например, стрелка вниз), а при раскрытом блоке класс меняется на стрелку вверх. Это делается с помощью JavaScript: при клике на заголовок скрипт проверяет текущее состояние блока и меняет соответствующий класс иконки. Такой подход улучшает визуальное восприятие и делает интерфейс более понятным для пользователя.
Как реализовать сворачиваемый блок текста в Битрикс без сторонних расширений?
Сворачиваемый блок текста можно создать с помощью стандартных средств Битрикс, используя комбинацию HTML, CSS и JavaScript. В HTML оформляется блок с текстом, который нужно скрывать, и кнопка или ссылка для управления сворачиванием. В CSS задаются стили для скрытого и открытого состояния блока, обычно через свойства display или max-height с плавным переходом через transition. JavaScript отвечает за переключение классов или стилей при клике на кнопку, что позволяет пользователю раскрывать или скрывать текст. Такой подход не требует подключения дополнительных модулей и полностью управляется на уровне шаблонов компонента.
Загрузка...
