Question

I have a piece of text, that I wish to show truncated, but when clicked it will expand to show the rest. Clicking again should truncate it.

I was trying to use the onclick event to handle this as follows (WARNING: Do not run following code without reading below…):

<span id='blah' onclick='showAllComment('this is a long comment to see it all', 9, true )'>this is a...</span>  <script> function showAllComment( comment, shortCommentLen, showFullComment ) {     alert( $('#blah').html() );      if( showFullComment )     {         $('#blah').html( comment );         $('#blah').click( showAllComment( comment, shortCommentLen, false ) );     }     else     {         $('#blah').html( comment.substring( 0, shortCommentLen ) + '...' );         $('#blah').click( showAllComment( comment, shortCommentLen, true ) );     } } </script> 

But as you will see, it repeatedly calls itself and you have to end task the browser (so be careful when running this code!!!!)

Can anyone suggest why this is happening, and what to do to resolve it.

Thanks in advance

Answer 1

This is because you are recursively invoking the showAllComment function

Try doing something like this instead:

function showAllComment( comment, shortCommentLen, showFullComment ) {     alert( $('#blah').html() );      if( showFullComment )     {         $('#blah').html( comment );         $('#blah').click( function () { showAllComment(comment, shortCommentLen, false);} );     }     else     {         $('#blah').html( comment.substring( 0, shortCommentLen ) + '...' );         $('#blah').click( function () {showAllComment( comment, shortCommentLen, true );} );     } } 

That way you are enclosing the invocation inside of an anonymous function, so it will get executed once you click the #bla element only.