feed twitter facebook LinkedIn facebook

jQuery » Ocultar y mostrar elementos con jQuery

febrero 5, 2009 por Víctor Cuervo 36 Comentarios Imprimir Imprimir

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>

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.  
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , , , , ,

Artículos relacionados:

36 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

1 2 3 4
  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.

1 2 3 4

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*