Показать скрыть текст (jquery, javascript, css, html, div)

С помощью данного скрипта можно реализовать функцию скрития части длинного текста, с раскрытием блока с полным текстовым содержимым по клику на ссылку (кнопку). Показать скрыть текст  средствами jquery легко с помощью библиотеки readmore.js.

Помимо данного способа, в сети существует множество других вариантов реализации функции скрытия полного текста, но именно этот показался наиболее удобным и простым в использовании и успешно работает на множестве рабочих проектах личных сайтов и интернет магазинов, созданных мною. Приемущества данного способа вконце статьи, а пока примеры и инструкция по использованию.

Показать скрыть текст с помощью библиотеки Readmore.js

Скачать плагин можно по ссылке:

https://github.com/jedfoster/Readmore.js

Скачиваем библиотеку, заливаем на хостинг и подключаем как и любую библиотеку (подразумевается что библиотека jquery у Вас на сайте уже подключена – если вы используете какой нибуть из движков, скорей всего так и есть)

Инициализация и основные параметры использования:

Если вы хотите внедрить скрипт показа скрытия текства в WordPress то данный код скорей всего не сработает. Для вордпресс используем следующий код:

В примере блок имеющий класс “mytext” будет показан высотой в 70рх и кнопкой с текстом “Показать”, при нажатии на которую будет показан полный текст блока, при этом текст кнопки измениться на “Скрыть”.

Показать скрыть текст – пример работы:

 

Текст который отображается частично и показывается польностью при нажатии кнопки “Показать”

Чтобы скрыть текст нужно нажать кнопку “Скрыть”



С базовыми знаниями CSS html можно оформить блок как угодно, также прописав вмето класса “mytext” любой класс блока сучествующего на сайте скрипт будет работать и с ним.

Самая заурядная задача, решаемая данным скриптом на практике – скрыть часть текста описания категории магазина, показать часть статьи с разворачиванием в блоге и многое другое.

Приемущество данного метода в том, что, в отличии от многих других плагинов, решающих данную задачу, скрипт не обрезает html теги и не коверкает содержимое блока. Блок может быть не только текстовым, но и содержать изображения и вложенные div блоки – скрипт прекрасно работает со сложными конструкциями.

Как всегда – ссылка на личную заначку (скачать скрипт показать скрыть текст / часть текста): Скачать

2 Comments

  1. Геннадий

    Спасибо за чудесную стать, прикручивал показать\скрыть в компентарии к опенкарт 1,5

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

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