create textnode expand and hide

Question

I have been trying to create a textnode that will expand and contract onclick, however it refuses to work in google chrome and displays [object Text] in firefox, where am I going wrong?

http://jsfiddle.net/jonSnow70/uf1bbk5q/

window.onload = function ()
document.getElementById("myBtn").addEventListener("click",
 textchange);

function textchange() {
  var status = "less";
  var text = document.createTextNode('Mmm ... something');


  if (status == "less") {
      document.getElementById("textArea").innerHTML = text;

      status = "more";
  } else if (status == "more") {
      document.getElementById("textArea").innerHTML = "";

      status = "less"
  }
}

Answer 1

Hmm, not sure why Chrome doesn't like .innerHTML =, but I tried replacing it with .appendChild() and it works. Try this:

var status = "less";
document.getElementById("myBtn").addEventListener("click", textchange);

function textchange() {
    var text = document.createTextNode('Mmm ... something');
    /* var text="<a href='index.php'>Index</a>";
     */
    if (status == "less") {
        document.getElementById("textArea").innerHTML = "";
        document.getElementById("textArea").appendChild(text);

        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").innerHTML = "";

        status = "less"
    }

}

By the way, declare var status="less" outside of your textchange() function. That way it will be global and not get reset everytime you click #myBtn.