title: new content replacing the old one hide and show
body: <p>I amd working with hiding and showing divs, which have different contents. When i click on a link, i want a div to be shown. But when i click on another link, i want the new content to replace the previous one. Right now, it falls under it instead of replacing it. Any solution?</p>
  
  <p>Javascript </p>
  
  <pre><code>function show(){
  
  var links = {
  link1: "content1",
  link2: "content2",
  link3: "content3",
  link4: "content4"
  };
  
  var id = event.target.id;
  var a = document.getElementsByTagName("a");
  document.getElementById(links[id]).style.visibility = 'visible';
  }
  
  function init(){
  
   var divs = document.getElementsByTagName("div");
   for (i = 0; i &lt; divs.length; i++) {
      if (divs[i].className == "div") {
          divs[i].style.visibility = 'hidden';
      }
  }
  var a = document.getElementsByTagName("a");
  for(i = 0; i &lt; a.length; i++){
     a[i].onclick = show;
  }
  }
  
  window.onload = init;
  </code></pre>