Ajax response that slides open a div

Question

Okay, this is following on from my previous question reguarding performing a simple ajax request that, once the request has returned a readyState of 4 and a status of 200 it inserts the response into a div and slides it down nicely. I don't want it to be performed using a toolkit such as jQuery or scriptalicious.

here is the original question:
Ajax with slide effects onready witout using a toolkit

So far I have managed to get it all working quite nicely. However I have the problem that, the text returned is shown and then the div expands. I need it to work with the div and text expanding together.

Here is my code

function slideDown()
{
    document.getElementById('slideDiv').style.visibility = 'hidden';
    xmlhttp.open("GET", "parse.php?what=main", true);
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById('butt').value = 'hide';
            document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;
            document.getElementById('slideDiv').style.display = 'block';
            var fHeight = document.getElementById('slideDiv').offsetHeight;
            document.getElementById('slideDiv').style.height = '0';
            document.getElementById('slideDiv').style.visibility = 'hidden';
            function timeIt()
            {
                function bar()
                {
                    timeSlide(fHeight);
                }
                setTimeout(bar, 10);
            }
            timeIt();
        }
    }
    xmlhttp.send(null); 
}

function timeSlide(fHeight)
{
    var fHeight;
    var diff;
    document.getElementById('slideDiv').style.visibility = 'visible';
    var cHeight = document.getElementById('slideDiv').clientHeight;
    if (cHeight < fHeight)
    {
        cHeight = cHeight + 3;
        document.getElementById('slideDiv').style.height = cHeight+'px';
        function timeIt()
        {
            function bar()
            {
                timeSlide(fHeight);
            }   
            setTimeout(bar, 10);
        }
        timeIt();
    }
    else
    {
        endSlide();
    }
}

I think this is happening due to using the following to put the returned get request into the div.

document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;

Can someone please put me in the correct direction with this? I'm not particularty good with JavaScript and I'm probably going the complete wrong way about it so any pointers would be great! Thanks in advance!

Answer 1

It's hard to say without seeing it in action but try adding this:

document.getElementById('slideDiv').style.overflow = 'hidden';