Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ocultar divs con un button

Estas en el tema de Ocultar divs con un button en el foro de Frameworks JS en Foros del Web. Estoy haciendo un formulario en varios divs, al cargar la página solo está activo el primero, rellenan los input type y hay un botón siguiente ...
  #1 (permalink)  
Antiguo 16/11/2011, 15:16
 
Fecha de Ingreso: marzo-2007
Mensajes: 58
Antigüedad: 17 años, 2 meses
Puntos: 0
Ocultar divs con un button

Estoy haciendo un formulario en varios divs, al cargar la página solo está activo el primero, rellenan los input type y hay un botón siguiente que oculte el primer div y muestre el segundo, así con tres o cuatro divs.
Quiero crear la función ocultar y mostrar con jquery o javascript, me da igual, pero no sé como hacerlo con el this para reutilizar el código .
Creo que existe forma de hacerlo pero llevo dos años sin programar y estoy desentrenada totalmente.
Un saludo a todos los que ayudan a novatos como yo

Disculpen porque he abierto un tema en un sitio no adecuado, quería llevarlo a jquery
  #2 (permalink)  
Antiguo 17/11/2011, 07:47
Avatar de linuxzero  
Fecha de Ingreso: noviembre-2011
Ubicación: Argentina
Mensajes: 778
Antigüedad: 12 años, 5 meses
Puntos: 160
Respuesta: Ocultar divs con un button

Aca te dejo un ejemplito de como hacer algo parecido, despues fijate si te sirve como esta o modificarlo como desees, es un ejemplo no es algo que este totalmente bien por varios factores, pero cumple con lo que vos más o menos pedís:

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.      $('#siguiente').click(function() {
  3.            var idAnterior = parseInt($('div').not('.ocultar').attr('id'));
  4.            $('#' + (idAnterior + 1)).removeClass('ocultar');
  5.            $('#' + idAnterior).not('.ocultar').addClass('ocultar');
  6.      })
  7. })

Código HTML:
Ver original
  1. <div id="1">1</div>
  2. <div id="2" class="ocultar">2</div>
  3. <div id="3" class="ocultar">3</div>
  4. <div id="4" class="ocultar">4</div>
  5.  
  6. <input id="siguiente" type="button" value="Siguiente" />

Cualquier cosa avisame ;)
__________________
Si todo fuera tan sencillo como un symfony cc la vida seria más fácil.
http://phpnico.wordpress.com
  #3 (permalink)  
Antiguo 17/11/2011, 07:54
 
Fecha de Ingreso: junio-2011
Ubicación: Vitoria-Gasteiz
Mensajes: 17
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Ocultar divs con un button

Te dejo una página para que veas cómo hacer eso sencillamente con jQuery.

[URL="http://guisandounaweb.com/?p=906"]http://guisandounaweb.com/?p=906[/URL]
  #4 (permalink)  
Antiguo 17/11/2011, 07:59
Avatar de linuxzero  
Fecha de Ingreso: noviembre-2011
Ubicación: Argentina
Mensajes: 778
Antigüedad: 12 años, 5 meses
Puntos: 160
Respuesta: Ocultar divs con un button

Me habia olvidado de ponerte el css:

Código CSS:
Ver original
  1. <style>
  2.     .ocultar {display:none;}
  3. </style>

Abrazo!
__________________
Si todo fuera tan sencillo como un symfony cc la vida seria más fácil.
http://phpnico.wordpress.com
  #5 (permalink)  
Antiguo 18/11/2011, 04:07
 
Fecha de Ingreso: marzo-2007
Mensajes: 58
Antigüedad: 17 años, 2 meses
Puntos: 0
Respuesta: Ocultar divs con un button

Muchísimas gracias a todos. Todavía no lo he probado, pero os agradezco las respuestas.
Esta tarde lo probaré y os diré como me ha ido.
Saludos afectuosos a todos
  #6 (permalink)  
Antiguo 24/11/2011, 01:53
 
Fecha de Ingreso: marzo-2007
Mensajes: 58
Antigüedad: 17 años, 2 meses
Puntos: 0
Respuesta: Ocultar divs con un button

Me va fantástico, y la idea de nombrarlos 1, 2, 3, e ir añadiendo 1 + es estupendo.
Gracias por la ayuda
  #7 (permalink)  
Antiguo 24/11/2011, 04:54
Avatar de linuxzero  
Fecha de Ingreso: noviembre-2011
Ubicación: Argentina
Mensajes: 778
Antigüedad: 12 años, 5 meses
Puntos: 160
Respuesta: Ocultar divs con un button

De nada ;), nos alegramos haberte sido de ayuda.
__________________
Si todo fuera tan sencillo como un symfony cc la vida seria más fácil.
http://phpnico.wordpress.com

Etiquetas: jquery
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




La zona horaria es GMT -6. Ahora son las 05:19.