Handling a toggled onclick with JQuery

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.

Answer 2

Users without javascript enabled will be unable to read the comment. A better approach would be to include the whole comment in the span and make the javascript truncate it when the page loads:

javascript:

$(function() {
    $(".blah").each( function() {
     var shortCommentLen = 9;
     var comment = $(this).html();     
     $(this).html(shortComment(comment, shortCommentLen));
     $(this).toggle(
      function() { $(this).html(comment); },
      function() { $(this).html(shortComment(comment, shortCommentLen)); }
     );

     function shortComment(comment, shortCommentLen) {
      return comment.substring( 0, shortCommentLen ) + "...";
     }
    });
});

html:

<span class='blah'>this is a long comment to see it all</span>

The toggle(fn1, fn2) function altenates between two functions when the element is clicked.