jquery - read more, show/hide html content -

i implement simple read more feature in jquery can cut off content , show/hide remainder using button.

if simple block of text wrap remainder in span, content can html.

for example:

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --cut off here-- commodo consequat. duis aute irure dolor in reprehenderit in</p> <p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

in example cut off @ marker --cut off here-- in middle of first p. but, might not inside p, or there may no html also. need cater should there

how can achieved?

http://jsfiddle.net/mblase75/65u5r/

here's complicated solution. upshot you're using .html() append first half of content html element, , letting jquery close you. when "read more" link clicked, .html() used again fill html element entire string, minus "--cut off here--" segment.

var allstr = "<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --cut off here-- commodo consequat. duis aute irure dolor in reprehenderit in</p><p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",     $container = $('#container'),     splitstr = "--cut off here--",     arr_str = allstr.split(splitstr),     fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...",     readmore = "<a href='#'>read more</a>";  $container.html(fstr);  $(readmore).on('click',function(e) {     e.preventdefault();     $(this).parent().html(arr_str.join('')); }).appendto($container);