Jquery problem collapsing div

Please see this http://jsfiddle.net/yv8uw/1/

When you click "View all Comments" the box opens up all right.... but when you click again, it doesn't col开发者_开发知识库lapse back like it was supposed to... please help.

Try changing your click handlers to live events.

Try this: http://jsfiddle.net/yv8uw/5/

Normally when you attack event handlers using .bind() or one of its shortcuts like .click() you only attach the events to the elements that were found when you called the .bind or .click method. The live events in jQuery work in a different way and you can make it work for elements that are not present in the DOM yet (or that don't have the class yet, like in your example). Read about live events in jQuery API docs.

Added it for you :)

works with the option

$(".toggle_comment_full").live("click",function(){ ...

and back $(".toggle_comment_small").live("click",function(){

I suggest you to use toggle function, which will simplify you condition:

Remove your click function and try this:

$(".toggle_comment_full").toggle(function(){
    var sc= $(this).parents("div:eq(1)").find(".status_comments");
    sc.animate({
        height: sc.find("table").height()
    },1000);
},function(){       
    var sc= $(this).parents("div:eq(1)").find(".status_comments");
    sc.animate({
        height: sc.find("tr:eq(0)").height()+sc.find("tr:eq(1)").height()
    },1000);  
});

I tried this one and it works

You are binding events to elements that don't exist:

// .toggle_comment_small does not exist at the time of binding
$(".toggle_comment_small").click(function(){

To bind events to elements that are generated on the fly, use live():

$(".toggle_comment_small").live('click', function(){

Example.