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 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
I have updated an example of how I want to get and how I am getting. — Mohammad Umar
@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

Mohammad Umar Mohammad Umar · Accepted Answer · 2021-05-27T07:30:32

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 Answers