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

[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>
 

[ceaped]

Hola PIRRUMAN
No me funciona. Mira lo que hice:

Código Javascript:

function divLogin(Idcaja){ 
   if(document.getElementById("caja_botonera_1").style.height==="0px" || document.getElementById("caja_botonera_2").style.height =='' || document.getElementById("caja_botonera_3").style.height ==''
   ){
       
   document.getElementById("caja_botonera").style.height = "500px";
   
   } else{
       document.getElementById("caja_botonera").style.height = "0px";      
   }   
}
 

Código HTML:

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

Gracias por tu ayuda

[PIRRUMAN]

agregaste los estilos??, la funcionalidad esta pero no veras ningun cambio si no agregas los estilos

..

Lo que hiciste solo hara que un div sea el que aparezca o se oculta al clickear en cualquiera de esos tres botones

[ceaped]

Hola PIRRUMAN
Me dice como se hace.
Ya he intentado de varias formas y no logro que me de.

Gracias por tu ayuda

[ceaped]

Hola PIRRUMAN
Y si agregué los estilos.
Utilicé los que tu pusiste.

Gracias por tu ayuda

[ceaped]

Hola
Tengo este código que me funciona:

Código Javascript:

$(function(){
  $(".cajon_boton").click(function(e){
           
        e.preventDefault();
    
        var contenido=$(this).next(".caja_botonera");
 
        if(contenido.css("display")=="none"){ //Abrir        
          contenido.slideDown(250);         
          $(this).addClass("open");
        }
        else{ //close       
          contenido.slideUp(250);
          $(this).removeClass("open");  
        }
 
      });
});
 

Código HTML:

<div class="cajon_boton"><img src="images/equipos_impresion_img.jpg" alt="Enlace"><a href="#" class="cajon_boton"><p>Enlace</p></a>
 

¿Cómo hago para utilizarlo sin la etiqueta <a hfer=""></a>?, así:

Código HTML:

<div class="cajon_boton"><img src="images/equipos_impresion_img.jpg" alt="Enlace"><p>Enlace</p>
 

Gracias por su ayuda