My read more/ read less is not showing header tags

user_13013606 0
Viewed 105

I am trying to add read more/ less in a div, which will have header tags too, but it's not reflecting

codes are:

$(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
.morectnt span {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  .morectnt span {
display: none;
}
  </style>
  <script>
  $(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
</head>
<body>

<div class="container bg-light py-5">
<div class="row">
<div class="col">
<div class="show">
<h1>lorem ipsum doler sit amet</h1>
<h2>subtitle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique.

Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.</div>
</div>
</div>
</div>

</body>
</html>

It's not taking h1, h2 tags, all content are coming in one single line as a paragraph.

css html javascript
1 Answers

when you get the text of the div it ignores what tag it is in. so i replaced .text() with .html() and it's fixed

$(function() {
  var showTotalChar = 200,
    showChar = "Show (+)",
    hideChar = "Hide (-)";
  $('.show').each(function() {
    var content = $(this).html();
    if (content.length > showTotalChar) {
      var con = content.substr(0, showTotalChar);
      var hcon = content.substr(showTotalChar, content.length - showTotalChar);
      var txt = con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
      $(this).html(txt);
    }
  });
  $(".showmoretxt").click(function() {
    if ($(this).hasClass("sample")) {
      $(this).removeClass("sample");
      $(this).text(showChar);
    } else {
      $(this).addClass("sample");
      $(this).text(hideChar);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});
.morectnt span {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .morectnt span {
      display: none;
    }
  </style>
  <script>
    $(function() {
      var showTotalChar = 200,
        showChar = "Show (+)",
        hideChar = "Hide (-)";
      $('.show').each(function() {
        var content = $(this);
        if (content.length > showTotalChar) {
          var con = content.substr(0, showTotalChar);
          var hcon = content.substr(showTotalChar, content.length);
          var txt = con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
          $(this).html(txt);
        }
      });
      $(".showmoretxt").click(function() {
        if ($(this).hasClass("sample")) {
          $(this).removeClass("sample");
          $(this).text(showChar);
        } else {
          $(this).addClass("sample");
          $(this).text(hideChar);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
      });
    });
  </script>
</head>

<body>

  <div class="container bg-light py-5">
    <!--<div class="row">
<div class="col">-->
    <div class="show">
      <h1>lorem ipsum doler sit amet</h1>
      <br/>
      <h2>subtitle</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta
      aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum
      gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.

    </div>
  </div>


</body>

</html>

user_120988660
Related