Question

Why will this code not work as an onclick ?

$('.mainz11').click (function() {
    $(this).animate({
        height: '280px'
    }, 800);
}, function() {
    $(this).animate({
        height: '100px'
    }, 800);
});

Answer 1

If you’re trying to first expand the element and then contract it, it should probably be something like this:

$('.mainz11').click(function() {
    // determine target heights
    if ($(this).hasClass("expanded")) {
            var targetHeight = 100;
    } else {
        var targetHeight = 280;
    }

    // animate
    $(this).animate({
        height: targetHeight
    }, { 
        duration: 800,
        complete: function() { $(this).toggleClass("expanded"); }
    });
});

This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/