Задать вопрос
vanesxl
@vanesxl

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

Здравствуйте,
У меня на странице имеется большой текст, но мне нужно часть его спрятать, а чтоб при клике он показывался.
Видел когда то что некоторые делали как то чтоб низу текст как бы мутнел, а при клике он открывался полностью
Как мне это можно реализовать?, заранее большое спасибо!
  • Вопрос задан
  • 6029 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Так? https://jsfiddle.net/webirus/k058u9ct/
$(this).toggleClass('active'); лишний, он для моего скрипта использовался, удалите
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
gubin_niko
@gubin_niko
Вариантов много, зависят некоторые от особенностей поведения и вёрстки.
Но вот, как я делаю чаще подобную задачу:

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

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

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

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

Войдите, чтобы написать ответ

Похожие вопросы