Question

I have a div with hidden visibility, and I’m putting text in to that div from database so don’t know it’s height.

What I would like to do is make an animation which would increase that div’s size until all text is visible. What I have so far is this:

function display_form () {
    $("#form_container").css("visibility", 'visible');
    $("#form_container").animate({
        height: $("#form_container").height(),
    }, 1500);
}

<div id="container">
    <div id="form_container"><?php echo $form; ?></div>
    <div id="content">
        some stuff here which should slide down as the form_container div gets bigger
    </div>
</div>

So my problem is that my form_container is hidden, but its size remains, so I have huge empty space. If I set its size to 0px then I have no way of knowing its real size…

Answer 1

I don’t think you need to mess with the visible CSS property.

Just do something like this in your CSS:

#form_container { display: none; }

Then your display_form function can just do this:

function display_form() {
    $('#form_container').slideDown(1500);
}