Foros del Web » Programando para Internet » Jquery »

panel que puede contraerse

Estas en el tema de panel que puede contraerse en el foro de Jquery en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 13/11/2013, 07:15
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 12 años, 3 meses
Puntos: 2
panel que puede contraerse

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
  1. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery1.4.2.js"></script>
  2. <script type="text/javascript">
  3. function spoiler() {
  4. $("#spoiler1").toggle(400);
  5.  
  6. var value1 = document.getElementById("spoiler2");
  7.  
  8. if(value1.value == "Spoiler (Click para abrir)"){
  9.    
  10.     value1.value = "Spoiler (Click para cerrar)";
  11. }else{
  12.     value1.value = "Spoiler (Click para abrir)";
  13. }
  14.    
  15.    
  16.  
  17.  
  18. }
  19.  
  20.  
  21. </script>

El codigo css:

Código CSS:
Ver original
  1. /*Boton Spoiler*/
  2. #spoiler2 {
  3.     width:100%;
  4.     padding: 10px 10px;
  5.     margin: 2px 0;
  6.     background: #4479BA;
  7.     color: #FFF;
  8.     -webkit-border-radius: 4px;
  9.     -moz-border-radius: 4px;
  10.     border-radius: 4px;
  11.     border: solid 1px #20538D;
  12.     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  13.     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  14.     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  15.     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  16.     -webkit-transition-duration: 0.2s;
  17.     -moz-transition-duration: 0.2s;
  18.     transition-duration: 0.2s;
  19.     -webkit-user-select:none;
  20.     -moz-user-select:none;
  21.     -ms-user-select:none;
  22.     user-select:none;
  23. }
  24. #spoiler2:hover {
  25.     background: #356094;
  26.     border: solid 1px #2A4E77;
  27.     text-decoration: none;
  28.     cursor: pointer;
  29. }
  30. #spoiler2:active {
  31.     -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  32.     -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  33.     box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  34.     background: #2E5481;
  35.     border: solid 1px #203E5F;
  36. }

¿Como puedo insertar mas de uno?
  #2 (permalink)  
Antiguo 13/11/2013, 08:19
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 2 meses
Puntos: 578
Respuesta: panel que puede contraerse

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

MOVER A JQUERY.
  #3 (permalink)  
Antiguo 13/11/2013, 09:16
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 12 años, 3 meses
Puntos: 2
Respuesta: panel que puede contraerse

Cita:
Iniciado por PHPeros Ver Mensaje
¿Y qué pensabas que iba a ocurrir? Solo aplicas toggle() a #spoiler1.

MOVER A JQUERY.
¿como puedo hacer para que funcione como quiero?
  #4 (permalink)  
Antiguo 13/11/2013, 09:36
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 2 meses
Puntos: 578
Respuesta: panel que puede contraerse

$("#spoiler2").toggle(400); y así sucesivamente.
  #5 (permalink)  
Antiguo 30/11/2013, 21:13
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 12 años, 3 meses
Puntos: 2
Respuesta: panel que puede contraerse

Cita:
Iniciado por PHPeros Ver Mensaje
$("#spoiler2").toggle(400); y así sucesivamente.
si pero como se haria automatico???
  #6 (permalink)  
Antiguo 01/12/2013, 03:30
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 9 meses
Puntos: 206
Respuesta: panel que puede contraerse

Usando argumentos en las funciones.
  #7 (permalink)  
Antiguo 21/12/2013, 15:26
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 12 años, 3 meses
Puntos: 2
Respuesta: panel que puede contraerse

Cita:
Iniciado por marlanga Ver Mensaje
Usando argumentos en las funciones.
explicame como haci???

Etiquetas: input, javascript, js, panel, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:43.