Qhen mousing over a link I want the div that contains the link and other content to increase in height then back down to 19px on mouse out

I'm customizing forum software

• each page has 20 threads
• each thread is contained inside a div whose class="threadpreview"
• inside of each "threadpreview" divs are the LINKs to the full thread, and a 500 character preview of the thread right beneath the link
• when the page loads up, I have all the divs' height set to 19px and overflow:hidden so that the preview of the thread is hidden and you can only see the LINK so the divs look "rolled up"
• when a user mouses over the LINK for that thread, the threadpr开发者_StackOverflow社区eview div should "unroll" to it's original height to show the content, and onmouseout it should roll back up to 19px to hide the content.

(I'm not using jQuery)

EDIT: If jQuery can do this easily I'll give it a shot

Something like this should point you in the right direction:

function init() {
    var lDivs = document.getElementsByTagName("div");
    for(var i = lDivs.length; i--;) {
        if(lDivs[i].className == "threadpreview") {
            lDivs[i].onmouseover = function() { this.style.height = ""; } // probably better to also use lDivs[i].addEventListener("mouseover", ..., false);
            lDivs[i].onmouseout = function() { this.style.height = "19px"; }
        }
    }
}

window.addEventListener("load", init, false); // or window.attachEvent for IE, or window.onload = ...

You'll have to use the appropriate event-attachment function (or switch between them).