Question

I am trying to append a div to pdpTab5 if the tab contains more than 540 charecters. Where i will be creating a “read more…” sort of situation through a modal.

I am truncating the text by using this. But the part of adding a div is making me confused. I dont want to show the div if the tab contains less than 540 charecters.

<script>
    $(function(){
        var myDiv = $('#pdpTab5');
        myDiv.html(myDiv.html().substring(0,540));
    });
</script>

Answer 1

$(function() {
      var myDiv = $('#pdpTab5'),
          divChars = myDiv.text(),
          shortened = divChars.substring(0, 540) + "... <a href='#' class='readMore'>Read more</a>",
          $new =$(myDiv.clone().html(shortened));


      if (divChars.length > 540) {
          // Perform some action here, not quite sure what you wanted to do 
          myDiv.empty().append($new).find(".readMore").on("click", function() {

              $(this).parent().empty().text(divChars);
          });


      }
 });

Here’s the fiddle.