Question

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?

Javascript

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 < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
var a = document.getElementsByTagName("a");
for(i = 0; i < a.length; i++){
   a[i].onclick = show;
}
}

window.onload = init;

Answer 1

You need to run the block of code that hides them all before showing the one you want, every time.

Make this:

function hideAll() {
    var divs = document.getElementsByTagName("div");
     for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
}

Remove this code from init() and replace it with a call to hideAll() and add a call to hideAll() at the beginning of show().