Mostrar y ocultar varias Div

[PIRRUMAN]

Código CSS:

.cajon_boton{
    padding: 10px;
    background: orange;
    width: 95px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 1px #000;
    display: inline-block;
}
 
.cajon_boton:hover{
    opacity: .8;
}
 
.caja_botonera{
    width: 100%;
    margin: auto;
    height: 0px;
    background: #ccc;
    box-shadow: 10px 10px 3px #D8D8D8;
    transition: height .4s;
}
.cajon_boton:hover{
    opacity: .8;
}
.cajon_boton:hover + #caja{
    height: 100px;
}
 

Código Javascript:

function divLogin(Idcaja){ 
   if(document.getElementById(Idcaja).style.height==="0px"
   || document.getElementById(Idcaja).style.height ==''
   ){
   document.getElementById(Idcaja).style.height = "100px";
   } else{
       document.getElementById(Idcaja).style.height = "0px";      
   }   
}
 

Código HTML:

<div class="cajon_boton" onclick="divLogin('caja_botonera1')"><img src="img_1.jpg" alt=""><p>Botón 1</p></div>
    <div class="caja_botonera" id="caja_botonera1"></div>
     
    <div class="cajon_boton" onclick="divLogin('caja_botonera2')"><img src="img_1.jpg" alt=""><p>Botón 2</p></div>
    <div class="caja_botonera" id="caja_botonera2"></div>
     
    <div class="cajon_boton" onclick="divLogin('caja_botonera3')"><img src="img_1.jpg" alt=""><p>Botón 3</p></div>
    <div class="caja_botonera" id="caja_botonera3"></div>