How to change a textNode created in a different function

Question

I´m doing a simple show/hide script where I have 2 sections of text that are hidden. I have created 2 "read more" links with help of createTextNode. My problem is that the link text "Read more" is suppose to change to "Hide" once the link has been clicked and the hidden text is showing and when I click on "Hide" it should change back to "Read more". But I can´t seem to find the right way to change the nodeValue for this, probably because I´m trying to reach the node from the second function "hideShow".

Another smaller question as well. I can´t get the script to work when I place a link in the head, only when I place a link before the closing tag. I know this is a better way but still, how come it´s not working? Something to do with window.onload?

Thank you for any help!

Here is my code:

window.onload = hideText(); 

function hideText() { // Function to hide text and create links
    if (document.getElementsByClassName) { // Check if browser understands method
        var hideElement = document.getElementsByClassName("show"); // Get all elements with class "show" and add in array "hideElement"
        for (var i=0; i < hideElement.length; i++) {
            var link = document.createElement("a"); // Create link for all class "show" elements
            hideElement[i].parentNode.insertBefore(link, hideElement[i]); // Putting links before hidden element
            link.appendChild(document.createTextNode("Read more")); // Give links a textNode child
            link.setAttribute("href", "#"); 
            link.onclick = (function(element) { //When click on link function hideShow
                return function() { hideShow(element); };
            })(hideElement[i]);     
            hideElement[i].style.display = "none"; // If no link click element with class "show" is hidden
        }
    }
} 

function hideShow(element)
{   
    if (element.style.display == "none") {  
        element.style.display = "block";    
        for (var i=0; i<link.length; i++) {     
        link.firstChild.nodeValue = "Hide";
        }   
    }
    else {
        element.style.display = "none";     
    }
}

Answer 1

working example on http://jsfiddle.net/TxWQE/

function hideText()

in function hideText() you should change

link.onclick = (function(element) { //When click on link function hideShow
    return function() { hideShow(element); };
})(hideElement[i]);  

into

link.onclick = (function(element, link) { //When click on link function hideShow
    return function() { hideShow(element, link); };
})(hideElement[i], link);

function hideShow(element)

and the hideShow(element) function should be

function hideShow(element, link)
{
    if (element.style.display == "none") {  
        element.style.display = "block";    
        link.innerHTML = "Hide";
    }
    else {
        element.style.display = "none";
        link.innerHTML = "Read more";
    }
}