Question

I want load html with ajax. But i have problems with it. When you click the button. I load with jquery load, the html in the container. The container is .project-detail. I want that the container is animate from top to bottom. But the problem. The first time i click on the button. It is not working. When i click a second time, it is working. What do i wrong?

function projectDetails() {
    var button = $(".list-portfolio"),
        slide = $(".project-detail");

    button.click(function(e){
        e.preventDefault();

        $(".project-detail").load("includes/ruimzicht.html");

        var height = $(".project-detail .column").outerHeight();
        slide.animate({height: height},600);

        $(".project-detail .column").css({ opacity: 0.5 });
    });
}

Answer 1

You need to wait till ajax load the content. I think this code should work,

function projectDetails() {
    var button = $(".list-portfolio"),
        slide = $(".project-detail");

    button.click(function(e){
        e.preventDefault();

        $(".project-detail").load("includes/ruimzicht.html", function() {
            var height = $(".project-detail .column").outerHeight();
            slide.animate({height: height},600);

            $(".project-detail .column").css({ opacity: 0.5 });
        });        
    });
}