
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:
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.
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.
$("#ocultar").click();
$("#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:
hide (velocidad, funcion_callback);
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:
$("#ocultar").click(function(){$("#msgid1").hide("slow")});
$("#mostrar").click(function(){$("#msgid1").show("slow")});
Solo nos quedará ponerlo dentro de la función ready(), básica para jQuery.
$(document).ready(function(){
$("#ocultar").click(function(){$("#msgid1").hide("slow")});
$("#mostrar").click(function(){$("#msgid1").show("slow")});
});
Elio
Ya lo logre! les dejo el código por si le sirve a alguien mas
con esto el div aparece oculto.
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!
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.
Elio
como le hago para que el texto venga oculto desde el principio saludos!
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?
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 =)
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.!
Miguel
¡Gracias por el código!
Estoy iniciándome en este lenguaje, y me vienen muy bien estos ejemplos! :)
Víctor Cuervo
@JaGa,
Para tener varios textos lo que puedes hacer es darles ID diferentes y solo ocultar los ID que te interesen.
Para llamarlo desde un texto o enlace igual, asignale un ID
Si no quieres enlace y que sea un texto, crea un SPAN con ese ID:
Espero que te oriente.
Saludos.
Víctor Cuervo
@chuck,
Puedes hacer un .hide() sobre los elementos button.
$(«button»).hide();
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
chuk
hola como hago que solo se muestren las imagenes sin botones
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.
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
@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.
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?
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!! =)
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
});
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
carl
como se hace en jquery para ocultar/mostrar un div con solo un botón
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?
jesu
Que buen Post! muchas gracias era lo que buscaba!!
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.
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. :-)
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! =)
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:
Tu duda me parece muy buena para escribir un artículo… así que entre hoy y mañana escribiré explicándolo.
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…
Mario
Carnal gracias
Yo no buscaba exactamente esto pero me parecio muy bueno tu articulo.
Poco explicacion, funcional y claro.
Saludos.
martin
Gracias
Stan
@gdgddgs no es: $(«#ocultar»).hide();
es: $(«#msgid1»).hide();
Excelente explicacion!
lineadecodigo
@Netzio,
Te recomiendo que pegues tu código en nuestro foro de jQuery para poderlo revisar en detalle.
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
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!
gdgddgs
Hola Jose:
Antes que nada poner:
$(«#ocultar»).hide();
Jose
Hola me sirvio de mucho…
Tengo una pregunta como hago para que el texto aparezca oculto por defecto.