Показати приховати текст (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 блоки – скрипт прекрасно працює з складними конструкціями.

Як завжди – посилання на особисту заначку (завантажити скрипт показати приховати текст / частина тексту): Завантажити

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *