Mostrar y ocultar varias Div

[ceaped]

Buenos días
Utilizo este acordeón:
EJEMPLO

Pero necesito que me funcione con varias Divs.
Así tengo mi estructura:

Código Javascript:

var clic = 1;
function divLogin(){ 
if(clic==1){
document.getElementById("caja_botonera").style.height = "500px";
clic = clic + 1;
} else{
document.getElementById("caja_botonera").style.height = "0px";      
clic = 1;
}   
}
 

Código HTML:

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

Código CSS:

#caja_botonera {
    width: 300px;
    height: 0px;
    display: block;
    background-color: #FF0000;
    transition: height .4s;
    }
 

¿Cómo hago para que me funcione con varias DIV?

Gracias por su ayuda