Этот скрипт позволит автоматически скрывать длинные тексты в новостях или статьях на uCoz, добавляя кнопку «Читать далее», которая плавно разворачивает текст без перезагрузки страницы...
## 1. HTML и CSS
Вставьте этот код в раздел CSS (через «Управление дизайном» — «Таблица стилей») или оберните в тег <style> в шаблоне:
Код
<style>/* Контейнер для текста */
.read-more-wrapper {
overflow: hidden;
position: relative;
max-height: 150px; /* Высота видимой части текста до разворота */
transition: max-height 0.5s ease;
}
/* Кнопка разворота */
.read-more-btn {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #007bff;
color: #fff;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
}
.read-more-btn:hover { background: #0056b3; }</style>
.read-more-wrapper {
overflow: hidden;
position: relative;
max-height: 150px; /* Высота видимой части текста до разворота */
transition: max-height 0.5s ease;
}
/* Кнопка разворота */
.read-more-btn {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #007bff;
color: #fff;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
}
.read-more-btn:hover { background: #0056b3; }</style>
## 2. JavaScript
Добавьте этот скрипт в нижнюю часть сайта (перед тегом </body>):
Код
<script>$(document).ready(function() {
// Находим все блоки с контентом (замените .eMessage на свой класс, если нужно)
$('.eMessage').each(function() {
var $this = $(this);
// Если текст длиннее, чем заданная высота (150px)
if ($this.outerHeight() > 150) {
$this.addClass('read-more-wrapper');
// Добавляем кнопку сразу после блока текста
$this.after('<a href="javascript://" class="read-more-btn">Читать далее</a>');
}
});
// Обработка клика
$(document).on('click', '.read-more-btn', function() {
var $btn = $(this);
var $content = $btn.prev('.read-more-wrapper');
if ($content.css('max-height') !== 'none') {
$content.css('max-height', 'none'); // Разворачиваем
$btn.text('Скрыть');
} else {
$content.css('max-height', '150px'); // Сворачиваем обратно
$btn.text('Читать далее');
}
});
});</script>
// Находим все блоки с контентом (замените .eMessage на свой класс, если нужно)
$('.eMessage').each(function() {
var $this = $(this);
// Если текст длиннее, чем заданная высота (150px)
if ($this.outerHeight() > 150) {
$this.addClass('read-more-wrapper');
// Добавляем кнопку сразу после блока текста
$this.after('<a href="javascript://" class="read-more-btn">Читать далее</a>');
}
});
// Обработка клика
$(document).on('click', '.read-more-btn', function() {
var $btn = $(this);
var $content = $btn.prev('.read-more-wrapper');
if ($content.css('max-height') !== 'none') {
$content.css('max-height', 'none'); // Разворачиваем
$btn.text('Скрыть');
} else {
$content.css('max-height', '150px'); // Сворачиваем обратно
$btn.text('Читать далее');
}
});
});</script>
## Как это работает
* Автоматизация: Скрипт сам проверяет высоту блока $MESSAGE$ (в шаблоне uCoz он обычно обернут в класс .eMessage). Если текст короткий, кнопка не появится.
* Гибкость: Вы можете изменить значение 150px в CSS и JS, чтобы настроить нужную высоту обрезки.
* Совместимость: Работает корректно во всех модулях uCoz (Новости, Блог, Каталог файлов).
