title: Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link
body: <p>I have paragraph which has more than 500 character. I want to get only initial 100 character and hide rest of it. Also I want to insert "More" link next to 100 character. On click of more link whole paragraph should display and edit text "More" to "Less" and on click "Less" it should toggle behavior. Paragraph is dynamically generated I cant wrap content of it using .wrap(). Here is example what I have and what I want.</p>
  
  <p>This is what I have :</p>
  
  <pre><code>  &lt;p&gt;It is a long established fact that a reader will be distracted by the readable 
     content of a page when looking at its layout. The point of using Lorem Ipsum is that
     it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
     and web page editors now use Lorem Ipsum as their default model text.&lt;/p&gt;
  </code></pre>
  
  <p>This is what I want when DOM loads </p>
  
  <pre><code> &lt;p&gt;It is a long established fact that a reader will be distracted by ..More&lt;/p&gt;
  </code></pre>
  
  <p>This is what I want when user click "More"</p>
  
  <pre><code>   &lt;p&gt;It is a long established fact that a reader will be distracted by the readable 
     content of a page when looking at its layout. The point of using Lorem Ipsum is that
     it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
     and web page editors now use Lorem Ipsum as their default model text. ..Less&lt;/p&gt;
  </code></pre>
  
  <p>When we click on "Less",  it should revert what on click "More" has done.</p>
  
  <p>I am using jQuery to split, slice and wrap substring into span which I want to hide but that doesn't work.</p>
  
  <pre><code>var title = $("p").text();
  var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
      .slice(0, -1).join(" ") + "...More &gt;&gt;";
  shortText.wrap('&lt;/span&gt;');
  </code></pre>