jump to navigation

Ocultar y mostrar elementos con jQuery Febrero 5, 2009

Publicado por lineadecodigo en : jQuery , trackback

Ocultar y mostrar elementos nos permitirá un gran dinamismo dentro de nuestras páginas web. Esto lo podremos hacer modificando las propiedades CSS de los elementos dinámicamente con JavaScript. jQuery nos ayudará a realizar esta tarea de una forma más sencilla. Si queremos ocultar y mostrar elementos con jQuery podemos apoyarnos en las funciones show y hide.

En nuestro ejemplo la página se compondrá de una capa con el texto y dos botones, a los que asignaremos la propiedades de ocultar y mostrar elementos. Nuestro código HTML es el siguiente:

  1. <button id="ocultar">Ocultar Texto</button>
  2. <button id="mostrar">Mostrar Texto</button>
  3. <div id="msgid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nunc. Ut ac purus. Mauris tempor, arcu aliquam pulvinar elementum, sapien pede consequat lectus, id lobortis justo mi nec eros. Integer condimentum leo at risus. Aenean vel mauris eget lectus condimentum laoreet. Duis dictum. Etiam mattis pretium metus. Vestibulum diam lectus, egestas in, semper consectetur, iaculis et, arcu. Integer ut lacus. Curabitur tempus nibh. Vivamus consectetur velit eget nulla. Sed at libero sit amet nulla commodo suscipit. Nunc elementum. Mauris magna lorem, tristique et, semper a, feugiat pulvinar, eros. Mauris lacus velit, vehicula ut, faucibus porttitor, ultrices id, ipsum. Vivamus ligula sem, interdum et, porttitor nec, commodo eu, odio. Nullam id lacus. Donec feugiat adipiscing dui. Nullam lobortis mi ac sem.</div>
  4.  

Ahora vamos con el código jQuery. Lo que haremos será gestionar el evento click de los botones y asignarles la función que nos permite ocultar y mostrar elementos con jQuery.

  1. $("#ocultar").click();
  2. $("#mostrar").click();

Accedemos a los botones mediante su id y anteponiéndolos la almohadilla (#).

Como hemos comentado antes las funciones para ocultar y mostrar elementos con jQuery son hide y show, las cuales asignaremos a los botones #ocultar y #mostrar respectivamente. Ambas funciones tienen la siguiente sintaxis:

  1. hide (velocidad, funcion_callback);
  2. show (velocidad, funcion_callback);

La velocidad tendrá el valor de la velocidad con la que queremos que se muestren u oculten las cosas. Los valores posibles son: slow, normal y fast o bien los milisegundos que queremos que se tarde. Por otro lado la funcion_callback será la función a la cual queremos llamar al acabar de ejecutar la función show o hide. El parámetro de funcion_callback es opcional.

De esta manera nuestro código para ocultar y mostrar elementos con jQuery sería de la siguiente forma:

  1. $("#ocultar").click(function(){$("#msgid1").hide("slow")});
  2. $("#mostrar").click(function(){$("#msgid1").show("slow")});

Solo nos quedará ponerlo dentro de la función ready(), básica para jQuery.

  1. $(document).ready(function(){
  2.  $("#ocultar").click(function(){$("#msgid1").hide("slow")});
  3.  $("#mostrar").click(function(){$("#msgid1").show("slow")});
  4. });
  5.  

Articulos Similares:

|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 6121 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, media: 5.00 de 5)
Loading ... Loading ...

Tags:, , , , , , ,

Comentarios»

1. Jose - Febrero 11, 2009

Hola me sirvio de mucho…
Tengo una pregunta como hago para que el texto aparezca oculto por defecto.

2. gdgddgs - Febrero 20, 2009

Hola Jose:

Antes que nada poner:

$(“#ocultar”).hide();

3. buttonpol - Abril 6, 2009

Me gustó como se explica el código.
Soy extremadamente nuevo en jquery (desde ya mismo), así que voy a estar seguido por acá.

Gracias!

4. Netzio - Septiembre 7, 2009

no me va, que estaré haciendo mal ??

if (…) {
$(‘#lblFacturaCompra’).show(); //para mostrar
}
donde el el control (lblFacturaCompra) es un Label que en sus Propiedades tiene Visible = False

5. lineadecodigo - Septiembre 9, 2009

@Netzio,

Te recomiendo que pegues tu código en nuestro foro de jQuery para poderlo revisar en detalle.

6. Stan - Septiembre 25, 2009

@gdgddgs no es: $(“#ocultar”).hide();

es: $(“#msgid1″).hide();

Excelente explicacion!

7. martin - Octubre 14, 2009

Gracias

8. Mario - Octubre 29, 2009

Carnal gracias

Yo no buscaba exactamente esto pero me parecio muy bueno tu articulo.

Poco explicacion, funcional y claro.

Saludos.

9. Buru_14 - Diciembre 21, 2009

Hola, tengo una consulta, como se puede hacer para que al ocultar el texto ya no lo vueva a mostrar? Ya intenté usar una cookie jquery pero no me sale!

Gracias…

10. lineadecodigo - Diciembre 21, 2009

@Buru,

El usar la cookie es muy buena idea. jQuery no viene con la gestión de cookies y es por ello que hay que usar un plugin http://plugins.jquery.com/project/cookie.

El código es muy sencillo:

$.cookie('micookie', 'valor'); //Para crearla
$.cookie('micookie'); //Para leerla

Tu duda me parece muy buena para escribir un artículo… así que entre hoy y mañana escribiré explicándolo.

11. Buru_14 - Diciembre 22, 2009

Gracias, ya pude solucionarlo, lo que hice fué robar el codigo fuente de una página, luego lo desintegré con FIREBUG e implementarlo. No es nada facil pero funciona! Estaría genial que publiques un tuto, porque en google todavía no ví ningún tuto al respecto, no está mal mi idea no? jajajaja

Bay y gracias! =)

12. lineadecodigo - Diciembre 28, 2009

@Buru_14,

Ya tienes el ejemplo sobre la gestión de cookies en jQuery en el artículo Usando cookies con jQuery

Espero que te guste. :-)

13. Linea de Codigo » Usando cookies con jQuery - Diciembre 31, 2009

[...] crearemos el código necesario para esta actividad. Puedes ver la explicación de este código en Ocultar y mostrar elementos con jQuery. Pero básicamente consistirá en el manejo de las funciones de jQuery: .hide() y [...]

14. kirakxn - Septiembre 2, 2010

ola tengo un ligero problema,
tengo que ocular un cuadro de texto e imegenes, ect.

pero al momento en el que se oculta tengo que hacer que la etiqueta “ocultar”, cambie por “mostrar”… aki esta el cod

function mostrarOcultar()
{
if(document.getElementById(‘carro’).style.display == ‘none’)
document.getElementById(‘carro’).style.display = ‘block’;
else
document.getElementById(‘carro’).style.display = ‘none’;
}

*-*-*-*-*-*-* html

Ocultar

– es asi agrandes rasgos.




Si tienes dudas sobre jQuery no dudes en visitar el Foro sobre jQuery.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen