title: How to add "read more" link with many paragraphs in jquery?
body: <p>I have a content <code>DIV</code> with many paragraphs.
  This is how its' markup look,</p>
  <pre><code>&lt;div class=&quot;more&quot;&gt;
      &lt;p&gt;Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. &lt;/p&gt;
      &lt;p&gt;That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. &lt;/p&gt;
      &lt;p&gt;Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Now I need to add a link to &quot;read more&quot; once the characters reach to 300 of <code> &lt;div class=&quot;more&quot;&gt;</code>. And also I would like to display this link  as a toggle.</p>
  <p>Just I tried it with jquery, but I couldn't figure it out properly.</p>
  <p>This is my jquery -</p>
  <pre><code>var showChar = 300;
  var ellipsestext = &quot;...&quot;;
  var moretext = &quot;more&quot;;
  var lesstext = &quot;less&quot;;
  $('.more').each(function() {
      var content = $(this).html();
  
      if(content.length &gt; showChar) {
  
          var c = content.substr(0, showChar);
          var h = content.substr(showChar-1, content.length - showChar);
  
          var html = c + '&lt;span class=&quot;moreelipses&quot;&gt;'+ellipsestext+'&lt;/span&gt;&amp;nbsp;&lt;span class=&quot;morecontent&quot;&gt;&lt;span&gt;' + h + '&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;a href=&quot;&quot; class=&quot;morelink&quot;&gt;'+moretext+'&lt;/a&gt;&lt;/span&gt;';
  
          $(this).html(html);
      }
  
  });
  
  $(&quot;.morelink&quot;).click(function(){
      if($(this).hasClass(&quot;less&quot;)) {
          $(this).removeClass(&quot;less&quot;);
          $(this).html(moretext);
      } else {
          $(this).addClass(&quot;less&quot;);
          $(this).html(lesstext);
      }
      $(this).parent().prev().toggle();
      $(this).prev().toggle();
      return false;
  });
  </code></pre>
  <p><a href="http://jsfiddle.net/3e3jv0kn/1/" rel="nofollow noreferrer">JS FIDDLE</a> with current jquery</p>
  <p>Hope somebody may help me out. Thank you.</p>