Div sobrepor outra div ao clicar e/ou fechar a outra.

Tenho duas divs, ao clicar no comando ela aparece, ao clicar novamente desaparece. Estou querendo fazer com que pelo menos uma das duas fique visível sempre, ou seja, ao clicar em um ele sobreponha sobre o outro e vice-versa. Já tentei usar z-index no script mas não consegui. Segue o comando:
 
 

< body>
 
<A HREF="#" ONCLICK="camada('menu')">Abre e fecha a camada 'menu'</A>
 
<!-- Camada 'menu' -->
<DIV ID="menu" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; z-index: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: visible;">
 CAMADA 1</DIV>
    
 
<!-- Camada 'menu' -->
<A HREF="#" ONCLICK="camada('menu2');">Abre e fecha a camada 'menu'</A>
 
<!-- Camada 'menu' -->
<DIV ID="menu2" STYLE=" position: fixed; TOP: 35px; LEFT: 5px; WIDTH: 800px; HEIGHT: 300px; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
 CAMADA 2
</DIV>
    
 
</ body>

SCRIPT:
 
< script>
 function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
 sDiv.style.visibility = "visible";
 sDiv.style.height = "300px";
} else {
 sDiv.style.visibility = "hidden";
 sDiv.style.height = "1px";
}
 }
</ script>