Отображение текста, который обрезан
Существуют длинные отзывы, которые нужно сократить и после чего по кнопке "Читать далее", чтобы открывался оставшийся кусок.
Сегодня методом JS, Jquery, пытался развернуть текст, но так и не вышло...
<div class="block-r__card-content" data-date="12 февраля 2020">
<p class="block-r__card-text">';
if (strlen($arProps["PREVIEW_TEXT"]) > 180) {
$textPrev = substr($arProps["PREVIEW_TEXT"], 0, 180);
$textPrev = rtrim($textPrev, "!,.-");
$textPrev = substr($textPrev, 0, strrpos($textPrev, ' '));
$textNext = substr($arProps["PREVIEW_TEXT"], strlen($textPrev));
echo $textPrev;
}else{
echo $arProps["PREVIEW_TEXT"];
}
//echo mb_strimwidth($arProps["PREVIEW_TEXT"], 0, 200, " ...");
echo '<div id="melp" style="display:none">'; echo $textNext; echo '</div>';
echo '</p>
<a href="javascript:void(0)" id="vis" onclick="my_f()" class="block-r__more">Читать далее</a>
</div>
Задавал уже через функцию display: block тексту echo $textNext;
Может кто-то сможет подсказать решение или в чём вопрос и почему просто изменением display не открывает? Благодарю.
Ответы (2 шт):
Автор решения: Denis640Kb
→ Ссылка
Если хотите таким образом реализовать, то можно так (добавил комментарии в коде)
<?php
$arProps["PREVIEW_TEXT"] = 'Ходят месяцы по кругу
Очень быстро друг за другом.
Завершил год свой виток,
Можно подвести итог.
Перед встречей с годом новым
Вспомним старый добрым словом.
Люди делали дела,
Жизнь своим порядком шла.
Новый год мы ждем с надеждой,
Верим в лучшее, как прежде,
Не к лицу пред ним испуг,
Бог даст, будет он нам друг.
Знаем мы, что в его власти
Принести нам радость, счастье.
Без удачи нам нельзя.
С Новым годом вас друзья!
';
?>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
.block-r__card-content{
width: 250px;
background: #d4eaff;
}
</style>
<?php
echo '<div class="block-r__card-content" data-date="12 февраля 2020">
<p class="block-r__card-text">';
if (strlen($arProps["PREVIEW_TEXT"]) > 180) {
$textPrev = substr($arProps["PREVIEW_TEXT"], 0, 180);
$textPrev = rtrim($textPrev, "!,.-");
$textPrev = substr($textPrev, 0, strrpos($textPrev, ' '));
$textNext = substr($arProps["PREVIEW_TEXT"], strlen($textPrev));
echo $textPrev;
}else{
echo $arProps["PREVIEW_TEXT"];
}
//echo mb_strimwidth($arProps["PREVIEW_TEXT"], 0, 200, " ...");
echo '<div id="melp" style="display:none">'; echo $textNext; echo '</div>';
echo '</p>
<a href="" id="vis" class="block-r__more">Читать далее</a>
</div>';
?>
<script language="JavaScript">
let fulltext = '<?php echo json_encode($arProps["PREVIEW_TEXT"]);?>'; // Передаём в js полный текст
let shorttext = '<?php echo json_encode($textPrev);?>'; // Передаём в js короткий текст (Это всё можно сразу в js делать)
let trig=0;
$('#vis').click(function (e) { // При нажатии на a href с id vis
e.preventDefault(); // Убираем стандартный обработчик события
if(trig%2==0) { // Если триггер чётное число
$('.block-r__card-text').text(fulltext); // Показываем полный текст
$('#vis').text('скрыть'); // Меняем текст кнопки на скрыть
} else {
$('.block-r__card-text').text(shorttext); // Показываем сокращённый текст
$('#vis').text('Читать далее'); // Меняем обратно текст кнопки
}
trig+=1;
});
</script>
Автор решения: teran
→ Ссылка
$(".more").click(function(e){
e.preventDefault();
$(this).closest('.comment')
.find('.hidden-text')
.removeClass('hidden-text');
});
.hidden-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment">
начало какого-то текста <span class="hidden-text">и его длинное продолжение</span>
<div><a href="#" class="more">далее</a></div>
</div>