Question

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 threadpreview 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

Answer 1

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).