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
:
Ver original<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:
Ver original/*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?