Отображать текст частично. Показывать полностью по нажатию кнопки

unomomento · February 2, 2015

На одной странице несколько объемных текстов.

Хотелось бы отображать только анонс от них, а полное содержимое по нажатию на кнопку Показать целиком/Свернуть.

Чтоб было понятнее, вот пример http://www.pushe.ru/
При нажатии на кнопку Два слова о фабрике PUSHE открывается див, кнопка меняется на Закрыть.

Только в моем случае, первоначально должна быть видна часть дива, а по кнопке уже полностью.

Как это лучше сделать?

Спасибо!

Int · February 2, 2015

Можно сделать text-overflow и обрезать текст через overflow. Если есть отдельный текст для анонса, то сперва выводить его, а по нажатию скриптом показывать/прятать блок с полным текстом, и текст анонса аналогично отображать, только в противофазе. Можно ещё сделать, чтоб полный текст аяксом получался при разворачивании, а при сворачивании убирался бы.

Aleksandr.L · February 2, 2015

Как это лучше сделать?

Наверно правильнее будет - сделайте за меня

Так чтоле? http://jsfiddle.net/6u7oypma/

Edited February 2, 2015 by Aleksandr.L

unomomento · February 2, 2015

Спасибо! Примерно это и нужно.

Но я собрал все один файл, почему-то не работает...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html dir="ltr" lang="ru"><head><meta charset="utf-8"><script type="text/javascript">var halfText = $('.spoiler').innerHeight() / 2,    textHeight = $('.spoiler').innerHeight();$('.spoiler').css('height', $('.spoiler').innerHeight() / 2);$('.show-hide').click(function() {    if( $('.spoiler').innerHeight() == halfText ) {        $('.spoiler').animate({ height: textHeight }, 500);        $(this).text('Скрыть');    } else {        $('.spoiler').animate({ height: halfText }, 500);        $(this).text('Показать');    }});</script><style type="text/css">.spoiler {    width: 30%;    overflow: hidden;}</style></head><body><div class="container">    <div class="spoiler">        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni optio provident! Ipsum quibusdam neque amet        sapiente quod libero ducimus ipsa possimus totam voluptatem nemo ex expedita sequi voluptatum rerum corrupti.        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni optio provident! Ipsum quibusdam neque amet        sapiente quod libero ducimus ipsa possimus totam voluptate</p>    </div>    <button class="show-hide">Показать</button></div></body></html>

Aleksandr.L · February 2, 2015

Скрипт перемести в конец <body>. И жуквери не забудь подключить.

Sign In

Отображать текст частично. Показывать полностью по нажатию кнопки

Question

unomomento

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

unomomento

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information