javascript - custom load more text function -

lets have this:

<div class="content">     <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>       <p>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>      <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>       <p>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>      <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>       <p>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>  </div> <div class="porfolio-single-load-more">     <a href="#" class="icon-holder prevent-history">         <i class="icon-plus"></i>     </a> </div> 

and want show first 300 chars , when clicking load more button, show rest of text,

i guess solution wrap exceding chars hidden div, don't know how so,

how can wrap char 301 untill end of text div?

var textcnt = this.maincnt.find('.single-portfolio .content'); if(textcnt.text().length > 300){     /* ?? */ }else{         $('.porfolio-load-more a').remove();  } 

the problem here each line of code own dom element. if can't refactor underlying html, you're going have iterate on each p element, pull out html text (and append string), wipe content div, insert string plus div divider.

so like

var full = ""; $('.content').children('p').each(function(){   full = full.concat($(this).html()); } $('.content').html(""); var first = full.substring(0, 300); var rest = full.substring(301); $('.content').append(first + "</div><div id=\"hidden\">" + rest); 

which split div way want. set display of hidden none, attach onclick handler button $.on() show() it