Read more button script not working with html format

Question

I am trying to add read more functionality to some text which includes heading and paragraphs. But it is showing all the text in one line. I want the text in formatting while clicking on read more.

Here is my code which I am using:

$(function() {

  var minimized_elements = $('.case-desc');

  minimized_elements.each(function() {
    var t = $(this).text();
    if (t.length < 200) return;

    $(this).html(
      t.slice(0, 200) + '<span>... </span><a href="" class="umore">More</a>' +
      '<span style="display:none;">' + t.slice(200, t.length) + ' <a href="" class="uless">Less</a></span>'
    );

  });

  $('a.umore', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  });

  $('a.uless', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  });

});

Is it possible to get the text with formatting as I cannot remove heading and want to show as it is.

Here is how my text looks like

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

But I am getting

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The problem is that `var t = $(this).text();` fetches just the text, so will effectively strip all the tags. See https://api.jquery.com/text/ "Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements." — Chris Lear, May 26 '21 at 14:44
I have updated an example of how I want to get and how I am getting. — Mohammad Umar, May 26 '21 at 14:45
@MohammadUmar See the comment above by Chris. You have to receive the `.html()` instead of `.text()` to preserve formatting. Then you cannot cut off at a fixed length of 80 with `.slice()`, you will have to parse the HTML in order to not cut off in the middle of an HTML tag or attribute. Another way is to loop through `.children()` instead. — Peter Krebs, May 26 '21 at 14:52
and if you have control over the text HTML then you can wrap the read more/less content in a class and use jquery to only add the read more less on it — Prikesh Savla, May 26 '21 at 14:54
Or, you could just use CSS to do all of it and cut it off at a certain pixel (or other unit) height, and use a hidden checkbox to maintain the state of more/less. [Hide Show content-list with only CSS, no javascript used](https://stackoverflow.com/q/17731457/215552) — Heretic Monkey, May 26 '21 at 19:18

score 0 · Answer 1 · answered May 27 '21 at 07:30

jQuery(document).ready(function() {
  length = 200;
  cHtml = jQuery(".case-desc").html();
  cText = jQuery(".case-desc").html().substr(0, length).trim();
  jQuery(".case-desc").addClass("compressed").html(cText + "... <a href='#' class='rmore'>More</a>");
  window.handler = function() {
    jQuery('.rmore').click(function() {
      if (jQuery(".case-desc").hasClass("compressed")) {
        jQuery(".case-desc").html(cHtml + "<a href='#' class='rmore'>Less</a>");
        jQuery(".case-desc").removeClass("compressed");
        handler();
        return false;
      } else {
        jQuery(".case-desc").html(cText + "... <a href='#' class='rmore'>More</a>");
        jQuery(".case-desc").addClass("compressed");
        handler();
        return false;
      }
    });
  }
  handler();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="case-desc">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

Read more button script not working with html format

1 Answers1