jquery - javascript show hide - handling html elements inside text -

jquery - javascript show hide - handling html elements inside text -

i showing , hiding text js - buttons more , less

var showchar = 330; var ellipsestext = '...'; var moretext = "more"; var content = $('#content').html(); if(content.length > showchar) { var c = content.substr(0, showchar-1); var h = content.substr(showchar-1, content.length - showchar); var html = c + '<span class="more">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>'; $('#content').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(); homecoming false; });

the problem having is: if content can have sometimes <strong class="yellow">text</strong> , 330th char somewhere in middle of strong element, cutting , rest of whole content becoming yellow.

how can observe if more-less going cutting html element , avoid html destroying?

here fiddle: http://jsfiddle.net/vvf8d/

you seek , utilize $('#content').text() instead of $('#content').html()

javascript jquery html