Mostrar y ocultar contenido con hide y show
Ofrecer la posibilidad de mostrar y ocultar contenido según la petición del usuario es una técnica que no falla cuando deseas mantener una página Web sencilla, minimalista y, en definitiva, no muy cargada de mucho contenido.
Una de las cosas que más nos interesan a los desarrolladores de páginas Webs es realizar un sitio con contenido dinámico y que sobre todo sea completamente atractivo para el usuario. En la mayoría de los casos, tenemos demasiada información que mostrar. Mostrar todo de golpe puede ser un efecto de estrés para el usuario. Lo ideal es mostrarle lo más importante y si desea ver más ya irá entrando en las secciones o en los bloques ocultos.
La información que no deseamos mostrar de forma directa salvo que el usuario quiera verlo (tales como comentarios, información extra, etc) se pueden ocultar y solo mostrarse cuando el usuario así lo decida. Si es esto lo que estás buscando, en este tutorial te vamos a explicar una forma sencilla de conseguirlo.
En este artículo vamos utilizar las funciones hide() y show() incluidas en la librería jQuery + CSS y Bootstrap 4 para lograr este propósito.
Para mostrar y ocultar un contenedor debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;”, como por ejemplo:
También será necesario tener un enlace con identificador único para capturar su evento con jQuery con el objetivo de realizar la llamada a show().
En la cabecera de la página o dentro de la etiqueta <head> se debe incluir la librería jQuery + la lógica de mostrar y ocultar el contenido y algunos estilos para mejorar la presencia de los elementos.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").on('click', function() {
$("#element").hide();
return false;
});
$("#show").on('click', function() {
$("#element").show();
return false;
});
});
</script>Al hacer clic en el elemento con id=»show» estamos llamando a la función show() de jQuery para mostrar el contenido que hay escondido en el contenedor con id=»element».
Y si hacemos clic en el elemento con id=»hide» estamos mandando a esconder el elemento con id=»element» utilizando la función hide() de jQuery.
El ejemplo está desarrollado utilizando los identificadores de los elementos pero también se puede hacer utilizando el atributo «class» que puede resultar mucho más interesante si hay más de un elemento oculto en la página Web.
Autor
¿Buscas trabajo de programador?
34 respuestas a “Mostrar y ocultar contenido con hide y show”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Como estas, quería hacerte una pregunta. En mi caso lo que quiero mostrar no es texto sino un pdf que obviamente ya lo tendría subido, como sería el código o como se encajaría a este tipo de archivo?
Hola,
En este caso tendrás que investigar como visualizar un archivo pdf en una página.
Lamento decir que nunca he tenido que hacer este trabajo y no puedo guiarte.
Saludos
Hola andres, esto se podria hacer si mostrar el codigo pero solo si fuera usando php
Hola, podria hacerse algo como esto pero, que no sea posible ver el contenido viendo el codigo fuente de la pagina?
Estimados,
Tengo una consulta… deseo ocultar los botones Imprimir y Volver al momento de dar clic en Imprimir… Intentando varias formas he podido ocultar el botón imprimir pero no puedo ocultar el botón Volver…
A la espera de su ayuda…
Hola,
Sin ver tu código es un poco difícil dar una respuesta acertada.
Saludos
Como seria posible usar esto pero con classes para hacerlo mas limpio, yo uso la primera opcion que diste en un comentario mas arriba pero al tener muchas opciones se hace el codigo muy largo y creo que esto podria afectar al rendimiento, no se si puedas orientarme sobre que buscar para hacerlo con clases y muchos divs a ocultar y mostrar gracias
hola JOse…estoy intentando hacer esto… tengo 2 (ayb) imagenes que serían los botones . al pasar el mouse en «A» quiero que se vea una imagen. al psar el mouse en B» otra imagen. pero esas dos imagenes ocultas estarian ubicadas en el mismo lugar. pero no seria problema porque al sacar el mouse en A o B . se ocultaria la imagen que le corresponde… se entiende?
Hola, en principio es posible. Saludos
Hola José. Interesante tu post y tu Blog!
¿Podría usar este código para mostrar y ocultar un botón de compra cada cierto tiempo durante la reproducción de una video carta de ventas?
Gracias de antemano.
Hola,
Si, aplicando algún ajuste.
Saludos
Una pregunta para ocupar este código en un datalist, y mostrar los datos según correspondan a tu elección se ocuparía lo mismo o seria algo mas
Hola, en un datalist necesitarás jugar con algún identificador que identifique cada fila para poder mostrar el contenido oculto. Como base te sirve. Saludos
Jose, estupendo tu código para mostrar y ocultar contenido.
Por favor me podrías ayudar indicándome un código para poner varios seguidos. Mil gracias de antemano
Hola buenos dias,
Si, te puedo indicar al menos 2 formas que se me ocurren de hacerlo.
1- Utilizar lo mismo que hay en el tutorial duplicando todo y cambiando los identificadores.
2- Utilizar clases y hacer un código más limpio.
Saludos
Hola,
Buen aporte y sencillo de implementar.
Pero me gustaria tener varias textos que se muestra/ocultan en la misma pagina, sin embargo solo funciona en el primero de ellos.
Tal vez con un array en la funcion para que la variable «#xxx» tenga varios valores y en cada texto a ocultar ir cambiando las id. Pero no tengo ni idea de como hacerlo.
Un saludo
Hola,
Creo que también lo puedes solucionar utilizando un class en vez de un id
Saludos
muchas gracias todo me funciono perfecto, solo que cuando le doy clikc en mostrar, antes de mostrar el contenido oculto, la pagina se me regresa hasta arriba sin cargar y cuando le doy en ocultar también pasa lo mismo. Hay alguna forma de solucionar esto.
si, falta poner un;
return false;
después de:
$(«#element»).hide();
y también despues de:
$(«#element»).show();
esta muy bueno , de hecho estoy usando 2 funciones (esta facilisimo para los diseñadores como yo) pero me gustaria saber como podria cerrar una al abrir otra
otra cosa es que va a #top de la pagina, sabes que se puede hacer??
saludos!
Hola,
El siguiente post te soluciona lo que deseas –> http://www.jose-aguilar.com/blog/comprobar-si-un-elemento-esta-visible-o-no-con-jquery/
Saludos
Gracias Maestro..
Está buenísimo, funciona perfecto !!
Gracias..
Gracias Maestro..
Está buenísimo, funciona perfecto !!
Hola una duda que tengo quiero que este codigo se haga para mostrar y ocultar mas cosas pero me falla cual es el problema porque quiero poner como 8 o 7 peqeñas descripciones pero no me deja. no se si porque lo llamo mal o porque me falta this.
hola
el codigo me funciono muy bien, pero tengo una duda, es posible que el contenido que se oculta (es una imagen) se le de click y se oculte? o es forzoso solo con la palabra cerrar?
Hola,
Si es posible, el ejemplo porque está hecho así pero tu podrías quitar lo de cerrar y que al pulsar encima de la imagen se cierre. Tendrás que añadirle un class o id a la imagen y programar su click. Algo asi:
$(«#id_image»).click(function(){
$(this).hide();
});
hola, en html como puedo hacer que al pulsar click la div desaparezca ??
Sencillo, tendrás tu div con un id=»element» por ejemplo y luego necesita javascript para hacerlo desaparecer al hacer click
$(«#element»).on(‘click’, function() {
$(this).hide();
})
file:///C:/Users/madonna/Desktop/ejemlo.html
XD
Hola,
primeramente decirte que el ejemplo que has puesto esta increible, pero lo ejecuto y no me hace absolutamente nada. podrías decirme el por qué?, la verdad es que es raro. muchas gracias.
Indícanos la url de tu ejemplo para que le hechemos un vistazo!
te refieres a la direccion que te pongo arriba?
#content {
width: 450px;
}
#close {
float: right;
font-weight: bold;
color: red;
}
#element {
margin: 0px auto;
min-height: 100px;
width: 450px;
box-shadow: 0 2px 5px #666666;
padding: 10px;
}
$(document).ready(function(){
$(«#hide»).click(function(){
$(«#element»).hide();
});
$(«#show»).click(function(){
$(«#element»).show();
});
$(«#hide2»).click(function(){
$(«#element2»).hide();
});
$(«#show2»).click(function(){
$(«#element2»).show();
});
});
Mostrar
cerrar
Este es un div ocultar
<!–If you click on the «Hide» button, I will disappear.
Hide
Show
If you click on the «Hide» button, I will disappear.
Hide |
Show–>