How to display the read more and less link if the text exceeds

Question

I am getting paragraph content from the database. I am trying to show 300 characters on screen adding the read more which is working.

My issue is, I have to display the less also when user click on read more so that the user can less the content. I tried below code

$(document).ready(function() {
  var maxLength = 300;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
  });
  $(".read-more").click(function() {
    $('.less').show();
    $(this).append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();

  });
  $(".less").click(function() {
    $(this).siblings(".more-text").contents().wrap();
    $(this).remove();
  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer 1

Modified your code to get it working, there are few changes, will explain in between the code itself.

$(document).ready(function() {
  var maxLength = 300;
  var readMore = null;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      // Stored the content inside an global variable as on unwrapping the element, the element is removed from the DOM.
      readMore = $(this).find(".more-text").contents();
    }
  });
  $(".read-more").click(function() {
    // Added parent method to target parent element as this element will be hidden so content inside it won't be visible
    $(this).parent().append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $('.less').show();
    $(this).hide();
    
    // Added click listener inside the read more click listener as element would only be created after clicking on read more
    var parentThis = this;
    // Stored parent "this ref" in a variable to remove the less element
    $(".less").click(function() {
      // Wrapped the previously stored content in span as earlier.
      readMore.wrap('<span class="more-text"></span>');
      // Made read more visible
      $(parentThis).show();
      // Removed the less element
      $(this).remove();
    });

  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Do read the comment through out the code

Answer 2

I have made few changes to your js code to make it work, please try this:

$(document).ready(function() {
  var maxLength = 300;
  var moretxt = "...Read More";
  var lesstxt = "...Read Less";
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
    }
  });
  $(".read-more").click(function() {
    if($(this).hasClass("more")){
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
    }
    else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
    }

  });

});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Hope it helps.