Ocultar y mostrar elementos con jQuery

05/feb/2009 jQuery , , 36 Comentarios
jquery

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.  

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

36 comentarios en “Ocultar y mostrar elementos con jQuery”

Víctor Cuervo

Elio

Ya lo logre! les dejo el código por si le sirve a alguien mas

con esto el div aparece oculto.

Víctor Cuervo

Elio

Gracias Daniel! me puedes ayudar un poco con el CSS la verdad es que no se mucho de eso el el div le puse la propiedad display:none….si lo oculta pero no responde el jquery,gracias de nuevo.

saludos!

Víctor Cuervo

Daniel (Respuesta para ELIO)

Elio pues muy facil, con “css” le aplicas la propiedad “display:none” al texto, así estará oculto al principio, ya después, las funciones jquery se encargarán de mostrar u ocultar el texto.

Víctor Cuervo

Elio

como le hago para que el texto venga oculto desde el principio saludos!

Víctor Cuervo

Daniel

Cómo le puedo hacer para poner varios elementos para ocultar y mostrar (en una misma página)
sin tener que rehacer el código jwquery con otros “id” de etiqueta?

Víctor Cuervo

Jonatan

Muy bueno.Pero tengo esta duda:

Tengo este HTML:
Beach1

Beach2

Beach3

Beach4

Beach5

Beach6

y este jquery que me muestra y oculta la imagen cada vez que hago click en el boton(boton creado en el jquery)

$(document).ready(comenzar);

function comenzar(){

$(“.img-beach”).hide();
var boton=$(“Mostrar Playa”);
$(“.top-beach”).append(boton);//boton creado

$(“button”).click(function(){
//$(this).parent().next().show();

if($(this).parent().next().css(“display”)==”inline”){
$(this).parent().next().slideUp();
$(this).text(“Mostrar Playa”);
}else{
$(this).parent().next().slideDown();
$(this).text(“Ocultar Playa”);

}
})
}

*Me han pedido que cuando se despliegue una imagen con el boton ,la proxima imagen que despliegue haga que la 1era que desplegue se regrese a su posicion original(osea hide).Osea que cuando muestre y si los demas ya estan mostrados se regresen a hide.

Nose como puedo solucionarlo en el condicional.Espero su ayuda Gracias =)

Víctor Cuervo

Franco

Hola a todos.!

quisiera saber como puedo hacer que el combobox pueda oculatarse al momento de que este sea un usuario diferente.

Al momento de seleccionar la opcion de alumnos me muestre solo el text de matricula y contraseña y si se selecciona maestros, me pueda mostrar folio y contraseña.

Saludos.!!

Espero alguna respuesta.!

Víctor Cuervo

Miguel

¡Gracias por el código!

Estoy iniciándome en este lenguaje, y me vienen muy bien estos ejemplos! :)

Víctor Cuervo

Víctor Cuervo

@JaGa,

Para tener varios textos lo que puedes hacer es darles ID diferentes y solo ocultar los ID que te interesen.

<div id="msgid1">Lorem
<div id="msgid2">Lorem

$("#msgid1").hide(); // Solo ocultaría el texto1.

Para llamarlo desde un texto o enlace igual, asignale un ID

<a href="#" id="enlace" rel="nofollow">Texto
$("#enlace").click(function(){$("#msgid1").show("slow")});

Si no quieres enlace y que sea un texto, crea un SPAN con ese ID:

<span id="enlace">Texto
$("#enlace").click(function(){$("#msgid1").show("slow")});

Espero que te oriente.

Saludos.

Víctor Cuervo

Víctor Cuervo

@chuck,

Puedes hacer un .hide() sobre los elementos button.

$(“button”).hide();

Víctor Cuervo

JaGa

Como hago para tener varios texto que se muestren y se oculten en una misma pagina, y como hago para llamar las funciones desde un texto y no un boton. Gracias, buen post

Víctor Cuervo

chuk

hola como hago que solo se muestren las imagenes sin botones

Víctor Cuervo

Víctor Cuervo

@Alberto,

El ejemplo lo tienes ya publicado en http://lineadecodigo.com/jquery/efecto-leer-mas-texto-con-jquery/

Espero que te sirva. Saludos.

Víctor Cuervo

Reghyna

Hola! necesito ayuda por favor, tengo un problema trabajando con un formulario visible en una ventana modal ( manejada con div’s), tengo la siguiente estructura :

y se definió :

$(document).ready(function () {
$(‘#save_thumb’).click(function() {
alert(“val”);
….
});
});

Cuando el formulario esta visible osea: el div.img_up está con ‘display:block’ y se presiona el submit nunca llega a ejecutarse el evento definido para el boton ( no ejecuta el alert ) del formulario.

agradecida de antemano..

Víctor Cuervo

Víctor Cuervo

@alberto,

Podrías hacerlo teniendo de varias formas. La primera sería teniendo dos capas y jugando con el ocultar/mostrar una u otra.

Otra forma sería tener el texto del principio siempre fijo y el resto en la capa tal cual se muestra en el artículo.

No sé si a alguien más se le ocurre otra forma. Todos los comentarios son bienvenidos.

Víctor Cuervo

alberto

Hola es muy interesante pero me gustaría saber si hay alguna forma de mostrar unas lineas de texto y con una opción por ejemplo (mostrar todo) muestre todo el contenido de texto es posible?

Víctor Cuervo

casik

Muy buen tutorial, pero tengo una duda…
Como puedo hacer esto pero con mas de un DIV?? al ser con id solo se mostrara uno y si le pongo class se mostraran todos los divs.
Gracias!! =)

Víctor Cuervo

buttonpol

elmerxp, para que se ejecute al entrar en la home deberías poner (si no lo tienes)

$(document).ready(function() {
// aquí la llamada a tu función que muestra la imagen, o sea, lo que
// ejecutas en el .click(). Si no lo tienes en una función aparte, sería bueno que
// lo separaras para poder llamarlo de varios lugares
});

Víctor Cuervo

elmerxp

Holas :) en un div, ul tengo contenidos de imagenes que al hacer clic en uno se agranda la imagen en el centro de la pantalla… Cómo podria hacer que cuando se entra el home se ejecute una de esas imagenes en grande? sin la necesidad de hacer clic en ella en la primera vez? cuál seria el codigo de ejecución :( GRACIAS de antemano

Víctor Cuervo

carl

como se hace en jquery para ocultar/mostrar un div con solo un botón

Víctor Cuervo

Byron

estoy tratando de implementar un panel de login que se oculta hay mucho pero siempre en la mitad de los bordes de las paginas y yo quiero colocarlo en cualquier parte. COMO HAGO?

Víctor Cuervo

jesu

Que buen Post! muchas gracias era lo que buscaba!!

Víctor Cuervo

kirakxn

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.

Víctor Cuervo

lineadecodigo

@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. :-)

Víctor Cuervo

Buru_14

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! =)

Víctor Cuervo

lineadecodigo

@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.

Víctor Cuervo

Buru_14

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…

Víctor Cuervo

Mario

Carnal gracias

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

Poco explicacion, funcional y claro.

Saludos.

Víctor Cuervo

martin

Gracias

Víctor Cuervo

Stan

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

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

Excelente explicacion!

Víctor Cuervo

lineadecodigo

@Netzio,

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

Víctor Cuervo

Netzio

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

Víctor Cuervo

buttonpol

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!

Víctor Cuervo

gdgddgs

Hola Jose:

Antes que nada poner:

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

Víctor Cuervo

Jose

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*