Question

I’m trying to run a function twice. Once when the page loads, and then again on click. Not sure what I’m doing wrong. Here is my code:

$('div').each(function truncate() {
    $(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});

$('.truncate').click(function() {

    if ($(this).parent().hasClass('closed')) {
        $(this).parent().removeClass('closed').addClass('open').children().show();
    }

    else if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open').addClass('closed');
        $('div').truncate();
        $(this).show();
    }

});

The problem is on line 13 where I call the truncate(); function a second time. Any idea why it’s not working?

Edit jsFiddle here: http://jsfiddle.net/g6PLu/

Answer 1

That’s a named function literal.

The name is only visible within the scope of the function.
Therefore, truncate doesn’t exist outside of the handler.

Instead, create a normal function and pass it to each():

function truncate() { ...}

$('div').each(truncate);