Как обрезать текст и развернуть его по клику

Рассмотрим такую задачу — у нас есть текст, нам необходимо скрыть его до определенного символа, а по клику на кнопку подробнее развернуть.

Как развернуть текст по клику

Для начала давайте этот текст подготовим. Рассмотрим пример на PHP. Если у вас текст содержит теги HTML, то давайте их для начала уберем:

Итак, чистый текст у нас находится в переменной $str. Следующие действия:

  •  проверить количество символов в строке
  •  вывести обычный текст если символов окажется меньше чем нужно
  •  оставить необходимое количество символов
  •  убрать лишние символы в конце строки
  •  находим последний пробел и показываем целое слово
  •  считаем сколько теперь занимает строка и из переменной $str берем остальную часть текста

Если на этом этапе вам всё понятно, взглянем теперь на весь код, и добавим немного HTML разметку для наших переменных:

Добавим CSS для части текста, которая будет показываться по клику на «подробнее» — просто скроем его:

Ну и нам остается добавить показ этого кода по клику, воспользуемся jQuery:

Не забывайте подключать библиотеку jQuery для работы этого кода 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *