title: Make strand of text appear and another disappear on same delay
body: <p>How do I make a strand of text appear in 5 seconds, and another strand of text disappear in 5 seconds? I can do either one alone but together neither one will work. I've posted the code below. I tried to rename some of the functions for one of them and keep the other the same but that didn't work so I undid that. </p>
  
  <pre><code>&lt;script&gt;
  // First strand of text
  
  window.onload = function(){
    var theDelay = 5;
    var timer = setTimeout("showText()",theDelay*1000)
  }
  function showText(){
    document.getElementById("delayedText").style.visibility = "visible";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="delayedText" style="visibility:hidden"&gt;
  This text will appear after 5 seconds
  &lt;/div&gt;
  
  &lt;script&gt;
  // Second strand of text
  
  window.onload = function(){
    var theDelay = 5;
    var timer = setTimeout("showText()",theDelay*1000)
  }
  function showText(){
    document.getElementById("delayedText").style.visibility = "hidden";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="delayedText" style="visibility:visible"&gt;
  This text will disappear after 5 seconds
  &lt;/div&gt;
  </code></pre>