Как скрыть часть текста?

Question

[VaneS Ri_Lax]

Здравствуйте,
У меня на странице имеется большой текст, но мне нужно часть его спрятать, а чтоб при клике он показывался.
Видел когда то что некоторые делали как то чтоб низу текст как бы мутнел, а при клике он открывался полностью
Как мне это можно реализовать?, заранее большое спасибо!

Answer 1

[Сергей Горячев]

Так? https://jsfiddle.net/webirus/k058u9ct/
$(this).toggleClass('active'); лишний, он для моего скрипта использовался, удалите

Comments

[VaneS Ri_Lax]

Спасибо! Я ответ нашел вот тут https://habrahabr.ru/post/241485/
В принципе и меня тоже самое получается

[Apllo]

как можно реализовать эту идею на сайте с шаблоном Jupiter и плагином Visual Composer?? Что бы не делал, не работает (((

[naffunia]

У меня тоже не работает на шаблоне jollyany. Хээээлп!

Answer 2

[Nik Gubin]

Вариантов много, зависят некоторые от особенностей поведения и вёрстки.
Но вот, как я делаю чаще подобную задачу:

- Оборачиваем текст в контейнер (по умолчанию выставляем ему высоту) и внутри контейнера кладём ещё один div-блок (пропишите ему свойства, абсолютное позиционирование внизу контейнера, сделайте background градиентом или в фотошопе сделайте нужный спрайт)
- Слушаем клик по контейнеру с текстом и после клика делаем .slideDown() одновременно скрывая div-блок с градиентом (можно сразу просто убрать, а можно fideOut() прописать)

При повторном клике по тексту можно проверить, открыт он или нет (можно вешать какой-нибудь класс для проверки), и если открыт, то делаем animate({height: ваша_высота_по_умолчанию}, 300) и убираем класс, если ставили.

Если что-то не понятно, пишите, помогу чем смогу ;-)

P.S. Может быть есть вариант анимации на css3, но я не очень пока в ней разбираюсь.

Answer 3

[WahaWaher]

Можешь просто использовать плаг https://github.com/WahaWaher/morecontent-js Подключаешь скрипт и инитишь с ограничением по высоте $(selector).moreContent({ height: 300 }); Тут пример с замутнением: https://wahawaher.ru/morecontent-js/