Small issue with Sliding DIV code Javascript

Question

Having a slight issue with some code I've written for a simple sliding div on a clients site.

The code should find the height of the div (as the length differs per page), and then set the div to a height of 100px. The issue at the moment is that the full length of the div is visible for half a second before javascript resizes it. Can anyone help me modify my code so that the div's full length is not visible to the user without clicking more info?

Here is the JS:

    function heightGet(){
    var moreinfoHeight = document.getElementById("moreinfo").clientHeight;
    var moreinfo = document.getElementById("moreinfo"); 
    moreinfo.style.height = moreinfoHeight + "px";
    moreinfo.style.visibility = "visible";
    document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
    document.getElementById("moreinfo_button").innerHTML="More Info";
    heightLess(moreinfoHeight);
} 

function heightMore(val){
    var moreinfo = document.getElementById("moreinfo");

    document.getElementById("moreinfo_button").href="javascript:heightLess(" + val + ");";
    document.getElementById("moreinfo_button").innerHTML="Less Info";

    moreinfo.style.height = val + "px";
    alert(div.height);
    /*setTimeout( function() {
                              // here add the code (or call a function) to be executed after pause
                          moreinfo.style.height = "100%";
                          }, 500 );*/
} 

function heightLess(val){
    var moreinfo = document.getElementById("moreinfo");

    document.getElementById("moreinfo_button").href="javascript:heightMore(" + val + ");";
    document.getElementById("moreinfo_button").innerHTML="More Info";

    moreinfo.style.height = "100px";

} 

heightGet is triggered on page load, heightMore is triggered on a button press for more info, and the opposite for heightLess

Answer 1

If I was you, I would add class with {height: 100px} or style to the container "moreinfo", and remove it in the heightMore function and add in the heightLess function. you don't have to search real height of the container if I understood you right.

function heightGet(){
    document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
    document.getElementById("moreinfo_button").innerHTML="More Info";
} 

function heightMore(val){
    var moreinfo = document.getElementById("moreinfo");
    moreinfo.className = '';
} 

function heightLess(val){
    var moreinfo = document.getElementById("moreinfo");
    moreinfo.className = 'shortview';
} 

and here is css part

.shortview{
     height: 100px;
}

hope it helps