hide show div when multiple nested layers exist

Question

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else { 
document.getElementById(layer).style.display="none";
}
}

I need this code to close the current layer and them open another. These layers exist in the content div and are nested 12 deep.

For instance:

This is in the body of the container(navigation) to control the content container which is nested 12 deep. (I came up with an idea on my own but it wound up closing all layers making my web page disappear)

<li><a href="#" onclick="javascript:showlayer('USNews')">US News</a></li>

Hence when the navigation button marked US News is clicked via the above it opens

Now, if I have US News open, and I click on say Politics (the third nested layer, I want USNews (the first nest layer) to close and only Politics to open (noticing of course that Politics is the Third Layer and USNews is the first layer).. and so forth..

I've attempted if else statements but I have been out of this for years now and am just frustrated beyond belief... any help would be greatly appreciated

Answer 1

Instead of writing the raw Javascript, why not use a library instead.

In JQuery you could move to the correct layer, and hide or show it relatively easily.
(Probably one line of script tbh.)

Answer 2

You can loop all the layers and hide them before. And only then show selected one.

function showlayer(layer){

var Layers=document.getElementsByTagName("div");
for(i=0;i<Layers.length;i++){
    if(Layers.getAttribute("class")=="layer"){
    Layers.style.display="none";
    }
}
document.getElementById(layer).style.display="block";
}


<li onclick="javascript:showlayer('USNews')"><a href="#" >US News</a></li>
<li onclick="javascript:showlayer('UkNews')"><a href="#" >Uk News</a></li>
<li onclick="javascript:showlayer('ArNews')"><a href="#" >Ar News</a></li>

<div id="USNews" class="layer"></div>
<div id="UkNews" class="layer"></div>
<div id="ArNews" class="layer"></div>