How to create Read More and Read Less in using jQuery?

I have some text data store in my database, And I am displaying to my view page, But I want to show read more and read less functionality on my view page, Because content is more then 700+ words, When I am clicking on read more it's automatically hiding all the content. Let me guide where I am doing mistake.

Here are my view file:

<span class="more">
    {!! ($prop->description) !!}
</span> 

Here are my CSS code:

<style>
  .morecontent span {
    display: none;
  }

  .morelink {
    display: block;
  }
</style>

Here are my jQuery Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100; // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
      var content = $(this).html();

      if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
      }

    });

    $(".morelink").click(function() {
      if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
      } else {
        $(this).addClass("less");
        $(this).html(lesstext);
      }
      $(this).parent().prev().toggle();
      $(this).prev().toggle();
      return false;
    });
  });
</script>

via Chebli Mohamed