Рассмотрим такую задачу – у нас есть текст, нам необходимо скрыть его до определенного символа, а по клику на кнопку подробнее развернуть.
Как развернуть текст по клику
Для начала давайте этот текст подготовим. Рассмотрим пример на PHP. Если у вас текст содержит теги HTML, то давайте их для начала уберем:
<? // наша строка, которая может содержать в себе HTML теги $str = "<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quia magni ipsum, consequatur ad ea voluptates minima voluptate soluta iste esse obcaecati aut sapiente dolorum et tempore hic quae autem.</div><div>Praesentium temporibus laborum, saepe tempora alias harum ducimus deleniti totam illum? Harum tenetur doloribus vitae quidem, doloremque laudantium labore iusto atque enim dolore ratione eum eos similique voluptatibus nemo consectetur.</div>"; // убираем HTML теги со строки $str = strip_tags($str); ?>
Итак, чистый текст у нас находится в переменной $str. Следующие действия:
- проверить количество символов в строке
- вывести обычный текст если символов окажется меньше чем нужно
- оставить необходимое количество символов
- убрать лишние символы в конце строки
- находим последний пробел и показываем целое слово
- считаем сколько теперь занимает строка и из переменной $str берем остальную часть текста
<? // проверяем длину строки if (strlen($str) > 180) { // записываем в переменную первые 180 символов $textPrev = substr($str, 0, 180); // смотрим на последние символы строки - текст не должен заканчиваться на символы эти 4 символа $textPrev = rtrim($textPrev, "!,.-"); // находим последний пробел, чтобы строка заканчивалась целым словом $textPrev = substr($textPrev, 0, strrpos($textPrev, ' ')); // записываем в новую переменную строку, которая начинается с последнего символа "текста анонса" $textNext = substr($str, strlen($textPrev)); ?> <? } else { // выводим целую строку, если ее длина меньше 180 символов echo $str; } ?>
Если на этом этапе вам всё понятно, взглянем теперь на весь код, и добавим немного HTML разметку для наших переменных:
<? $str = "<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quia magni ipsum, consequatur ad ea voluptates minima voluptate soluta iste esse obcaecati aut sapiente dolorum et tempore hic quae autem.</div><div>Praesentium temporibus laborum, saepe tempora alias harum ducimus deleniti totam illum? Harum tenetur doloribus vitae quidem, doloremque laudantium labore iusto atque enim dolore ratione eum eos similique voluptatibus nemo consectetur.</div>"; $str = strip_tags($str); if (strlen($str) > 180) { $textPrev = substr($str, 0, 180); $textPrev = rtrim($textPrev, "!,.-"); $textPrev = substr($textPrev, 0, strrpos($textPrev, ' ')); $textNext = substr($str, strlen($textPrev)); ?> <div class="review-text"> <span class="text-prev"><?=$textPrev?></span><span class="text-next"><?=$textNext?></span> <a href="#" class="text-more">подробнее</a> </div> <? } else { ?> <div class="review-text"><?=$str?></div> <? } ?>
Добавим CSS для части текста, которая будет показываться по клику на “подробнее” – просто скроем его:
.text-next { display: none; }
Ну и нам остается добавить показ этого кода по клику, воспользуемся jQuery:
<script> $('.text-more').click(function(){ // записываем предыдущий элемент var $prevText = $(this).prev(); // добавим эффект, который обычно используется для анимации, но со скоростью 0 это будет незаметно $prevText.slideToggle(0); // т.к. это ссылка, необходимо сбросить переход по анкору return false; }); </script>
Не забывайте подключать библиотеку jQuery для работы этого кода 🙂
Отличный скрипт, спасибо! А как вместо обрезанного текста поставить многоточие …
там где у вас идёт
$textPrev = substr($textPrev, 0, strrpos($textPrev, ‘ ‘));
поменять на
$textPrev = substr($textPrev, 0, strrpos($textPrev, ‘ ‘)).’…’;