Как сворачивать/разворачивать текст с помощью jquery?

Question

[nixbox]

Добрый день!
Есть текст в постах, задача кратко:
сделать разворачивание и разворачивание текста по клику (на самом тексте).

Подробнее:
1. Текст на странице изначально отображается на странице полностью,
его необходимо (при загрузке страницы) ограничить по кол-ву символов или строк (назовем это состояние превью).

2. По клику на превью сделать разворачивание отображая текст целиком.

3. При клике по развернутому тексту сворачивать обратно, до состояния превью.

Текущее решение:

$(document).ready(function() {
  $('.post_text').click(function() {
  $(this).slideToggle(500);
  });
});

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

Спасибо!

Answer 1

[RMate]

Однако, чтобы визуальнее лаконичнее выглядело - лучше дробить текст по абзацам.
Либо использовать fadeToggle

Comments

[nixbox]

RMate спасибо,
возможно есть решение без дополнительного скрытого div'a и без кнопки а по по клику на самом тексте?

[RMate]

nixbox,
Но такой код боится вывода разметки в статье. В ином случае - вам нужно где-то хранить текст статьи, и при клике на тексте просто подменять его на полную версию.

[nixbox]

RMate Большое Вам спасибо!
Все прекрасно работает!

[nixbox]

RMate если вы не против, назрел еще один вопрос :)

Я дополнил ваш код, добавив троеточие, если текст в состоянии превью и добавил к нему css курсор.

$(document).ready(function() {

            $('.fulltext').each(function() {
              var $this = $(this);

              if($this.html().length > 500){
                console.log(($this.html().length));
                var wrappedArticle = wrapArticle($this.html()) + "...";
                $this.css('cursor', 'pointer');
              }else{
                var wrappedArticle = wrapArticle($this.html())

              };

              $this.html(wrappedArticle);
            })

            $('.fulltext').click(function(){
              $(this).parent().find('.hidden').fadeToggle(300);
            })
          })

          function wrapArticle(text, index = 500)
          {
            var result = text.substr(0, index);
            return result + "<span class=\"hidden\">" + text.substr(index) + "</span>";
          }

Не могли бы вы подсказать, как в раскрытом состоянии убирать троеточие на конце текста?

[RMate]

nixbox,
Что-то вроде этого?)

[mehanik01]

Здравствуйте, я новичок и только изучаю js. Подскажите пожалуйста как это сделать наоборот. Чтоб он с начала мог скрывать.

[RMate]

mehanik01, Добрый день, по умолчанию чтоб был раскрыт, а при клике скрывался?