panel que puede contraerse

[satanson123]

Hola amigos, estoy creando un panel simple que puede contraerce pero cuando inserto mas de 1 por ejemplo 2 o 3 solo me habre 1.

En la siguiente imagen se muestran cerrados:



En la siguiente imagen se muestra cuando le doy click al del medio y se habre el de arriba:



Aqui les dejo el codigo php:

Código PHP:

      <form style="background:#fbfbfb;border:1px solid #e9e9e9;border-radius:4px;padding:3px;">
            
<input id="spoiler2" type="button" value="Spoiler (Click para abrir)" onClick="spoiler()"/>
<div id="spoiler1" style="display:none;padding:5px;">
Contenido a mostrar
</div>
 
</form> 
   

Aqui el javascript:

Código Javascript:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery1.4.2.js"></script>
<script type="text/javascript">
function spoiler() {
$("#spoiler1").toggle(400);
 
var value1 = document.getElementById("spoiler2");
 
if(value1.value == "Spoiler (Click para abrir)"){
    
    value1.value = "Spoiler (Click para cerrar)";
}else{
    value1.value = "Spoiler (Click para abrir)";
}
    
    
 
 
}
 
 
</script>
 

El codigo css:

Código CSS:

/*Boton Spoiler*/
#spoiler2 {
    width:100%;
    padding: 10px 10px;
    margin: 2px 0;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#spoiler2:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}
#spoiler2:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}
 

¿Como puedo insertar mas de uno?

[PHPeros]

¿Y qué pensabas que iba a ocurrir? Solo aplicas toggle() a #spoiler1.

MOVER A JQUERY.

[satanson123]

Iniciado por PHPeros

¿Y qué pensabas que iba a ocurrir? Solo aplicas toggle() a #spoiler1.

MOVER A JQUERY.

¿como puedo hacer para que funcione como quiero?

[PHPeros]

$("#spoiler2").toggle(400); y así sucesivamente.

[satanson123]

Iniciado por PHPeros

$("#spoiler2").toggle(400); y así sucesivamente.

si pero como se haria automatico???

[marlanga]

Usando argumentos en las funciones.

[satanson123]

Iniciado por marlanga

Usando argumentos en las funciones.

explicame como haci???