0

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";     
    }
}
Lisa
  • 416
  • 6
  • 16
  • 29
  • You could maybe try changing the for loop in the hideShow() function to.. `element.previousSibling.firstChild.nodeValue = "Hide";` – Keith Lantz Aug 14 '13 at 20:36
  • Thank you for your help! Unfortunately it still doesn´t work:( @KeithLantz – Lisa Aug 14 '13 at 21:22

1 Answers1

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";
    }
}
Damiaan Dufaux
  • 4,427
  • 1
  • 22
  • 33
  • Hi, Thanks for your response! Just tried your code and unfortunately it still doesn´t work. The link text don´t change. Wonder if my for loop in hideShow function is correct? Tried to remove it as well. @devian – Lisa Aug 14 '13 at 21:20
  • Can you check the code again, I just edited it. Also have a look at http://jsfiddle.net/TxWQE/ for a working example – Damiaan Dufaux Aug 14 '13 at 21:22
  • Ok with your updated code it is working on one of the links (great) but there are 2 sections of hidden text with one link on each. So the text is only changing into "hide" on one of them... @devian – Lisa Aug 14 '13 at 21:26
  • Can you tell me if my JSfiddle example is working on your computer? – Damiaan Dufaux Aug 14 '13 at 21:33
  • Hi, I just tried it and YES IT WORKS!!! Awseome! However the script in JSfiffle ends with hideText(), if I remove that snippet of code it works perfectly. It´s not suppose to end like that is it? Thanks you for your help! @devian – Lisa Aug 14 '13 at 21:38
  • Indeed you shouldn't write hideText() again because you already did it in the beginning (on the first line of code in your question: window.load = hideText) – Damiaan Dufaux Aug 14 '13 at 21:43