Question

I been researching on Show/Hide javascript and pushed it further with a mouseover effect to achieve what I want. I’ve set up a Fiddle for better accessibility. However, I now want to push it by having up to 4 different text areas (“Click here for more information”), and each text area would have more hover text as I tried to show in the HTML code itself. The javascript that I used and edited now has “ID”s corresponding to “0” and “1” which wouldnt work for my current HTML code as it has funky names like “uu3308-10” (made with Adobe Muse). Now, I’m wonder what variables would I have to change within the Javascript to make it function properly and is there a way to compile this code so it works with at least 11 other “Click here for more information” points?

Note: The current javascript makes showMoreText2 appear under both showMoreText areas (would like to make only one hover text appear at a time).

CLICK HERE FOR THE FIDDLE — > http://jsfiddle.net/TPLOR/vy6nS/

Thanks, I hope this was helpful enough. =)

Answer 1

kinda hackish: (see http://jsfiddle.net/vy6nS/30/ )

window.onload = function() {
    var elems1 = document.getElementsByClassName("expander");
    for (i = 0; i < elems1.length; i++) {
        elems2 = elems1[i].childNodes;
        for (x = 0; x < elems2.length; x++) {
            if (elems2[x].className == "toggle") elems2[x].onclick = function() {
                showMore(0, this);
            };
            else if (elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() {
                    showChilds("block", this);
                };
                elems2[x].onmouseout = function() {
                    showChilds("none", this);
                };
            }
        }
    }
};

function get_nextsibling(n) {
    x = n.nextSibling;
    while (x.nodeType != 1) {
        x = x.nextSibling;
    }
    return x;
}

function showChilds(disp, elem) {
    get_nextsibling(elem).style.display = disp;
}

function showMore(disp, elem) {
    var children = elem.parentNode.childNodes;
    for (i = 0; i < children.length; i++) {
        if (disp == 0 && children[i].className == "showMoreText") {
            children[i].style.display = children[i].style.display == "none" ? "block" : "none";
        }
    }

}​