NorfiPC
NorfiPC » Informaciones » Ocultar y mostrar elementos

Ocultar y mostrar elementos en HTML con JavaScript

Usar la propiedad style display para ver y ocultar contenido, bloques de texto, imágenes, botones o enlaces con un script. Códigos y ejemplos prácticos.
Como ocultar y mostrar elementos en páginas web con JavaScript


JavaScript nos permite hacer nuestras páginas más interactivas y atractivas, con efectos que funcionan del lado del navegador, sin que sea necesario recargar la página.
Uno de ellos es la opción de ocultar y de mostrar elementos de cualquier tipo, que pueden ser bloques de texto, imágenes, videos, anuncios, etc.
En este artículo explico cómo hacerlo, con varios ejemplos.


Ventajas y usos prácticos de ocultar elementos de una página


Es necesario ocultar elementos en las páginas por varias razones.
✓ Facilitar las lecturas en páginas con mucho contenido en dispositivos móviles.
✓ Ofrecer la opción al lector de ocultar secciones no necesarias.
✓ Ocultar elementos pesados de cargar como son imágenes grandes, videos, marcos etc. y mostrarlos solo a petición del lector.
✓ Ofrecer la opción de mostrar información adicional, solo al que esté interesado en ellas.

Ejemplo de una sección oculta en una página web


A continuación hay un bloque de texto en esta página oculto de forma predeterminado con CSS.
Para mostrarlo con JavaScript usa el siguiente botón.
Esta sección estaba oculta
Al dar clic se muestra la sección oculta y también un nuevo botón que permite volver a ocultarla.
De forma similar a la anterior se puede ocultar y mostrar cualquier elemento en una página.
En este ejemplo se hace incluyen en los botones sencillas funciones de JavaScript.


¿Cómo ocultar o mostrar una sección o elemento en una página?


Cualquier elemento o grupo de ellos en una página, se puede ver o mostrar de dos formas.

Ocultar elementos con CSS

Para eso en la hoja de estilo o de forma inline, aplicamos una regla con la propiedad "display".
Dos ejemplos:
<style>
#boton{display:none;}
</style>
<button id="boton3" style="display:none" type="button" onclick="ocultar()">Ocultar</button>
En ambos casos ocultamos el elemento que posee la identidad "boton".
Este método es muy usado con la desventaja de que es permanente.

Ocultar elementos con Javascript

La sugunda forma es usar la propiedad "style.display" de Javascript.
La ventaja de este método es que podemos cambiar su valor, cuantas veces sean necesarias, usando una función.
Explico a continuación como usarla.


Como usar style.display para ocultar y mostrar elementos


La propiedad style.display admite los siguientes valores:
'style.display = 'inline'
Valor predeterminado. Muestra un objeto de forma flotante, con contenido a uno y otro lado.
style.display = 'block'
Muestra un objeto en forma de bloque, ocupando una línea completa.
style.display = 'none'
Oculta completamente un objeto.
Para usar este método, primero tenemos que identificar el objeto y luego establecer su propiedad, mediante un evento.
La manera más sencilla de identificarlo es mediante un identificador ID, que debe ser único.
Ejemplo de un bloque de texto con el identificador "obj1".
<div id="obj1">Bloque de texto</div>
Bloque de texto
Ahora con la siguiente función ocultamos el elemento con la identidad "obj1", que hasta el momento estaba visible.
Para probar dicha función, solo da un clic encima del siguiente cuadro con el código.
function ocultar(){
document.getElementById('obj1').style.display = 'none';
}
Con la siguiente función mostramos el elemento con la identidad "obj2", que hasta el momento estaba oculto con CSS.
function mostrar(){
document.getElementById('obj2').style.display = 'block';
}
Las funciones anteriores se pueden accionar con cualquier evento, puede ser al dar clic en un botón, un enlace, un contenedor, etc.
En la práctica no es necesario tanto código, podemos simplificarlo para usarlo en enlaces, botones o en eventos que se disparan de varias formas.
Por ejemplo el código para un enlace:
<a href="javascript:document.getElementById('obj1').style.display='none';void 0">Ocultar</a>
Debemos de tener en cuenta que al usar JavaScript de esta forma, el código será tratado por el navegador como una dirección URL, por lo tanto no deben de existir espacios y si fueran imprescindibles se tienen que escapar, con %20.
Usa la siguiente herramienta: Escapar y codificar caracteres de direcciones URL a hexadecimal


Ocultar o mostrar elementos con JQuery


Los que usan la librería JQuery, lo tienen mucho más fácil y sencillo a la hora de ocultar o mostrar elementos.
Por ejemplo.
Para ocultar un contenedor con la ID "ocultar", dando clic en un elemento que posee la ID "disparador" (puede ser un botón, un enlace u otro elemento), usa el siguiente código:
$("#ocultar").click(function() {
$("#disparador").hide(1500);
});
Para mostrar un elemento oculto con con la ID "oculto", dando clic en un elemento que posee la ID "disparador", usa el siguiente código:
$("#oculto").click(function() {
$("#disparador").show("slow");
});
Consulta el siguiente artículo: JQuery, ejemplos prácticos para usar en páginas web


Mostrar elementos en las páginas escribiéndolos con innerHTML


Debemos de tener en cuenta que la propiedad Style display solo oculta y muestra el contenido.
Esté oculto o no, el navegador siempre lo cargará completamente.
En algunos casos necesitamos mostrar contenido, solo a petición del usuario, que pueden ser imágenes de gran tamaño, videos, anuncios u otros elementos.
Para evitar que se carguen de forma predeterminada, podemos escribirlos con JavaScript, usando la función innerHTML.
Es algo sencillo.
Para cargar una imagen y escribirla en el contenedor con la ID "nuevaimg" usa el siguiente código.
<script>
function mostrar(){
document.getElementById('nuevaimg').innerHTML = '<img src="ruta-imagen.jpg">';}
</script>
<a href="javascript:mostrar()">Mostrar</a>
Inline en un enlace seria:
<a href="javascript:void(document.getElementById('nuevaimg').innerHTML='&lt;img src=&quot;ruta-imagen.jpg&quot;&gt;')">Mostrar imagen</a>
En este caso es necesario escapar los caracteres de la etiqueta de la imagen.
Pruébalo usando el siguiente enlace: Mostrar imagen
Más información sobre el uso de innerHTML para escribir código de forma dinámica (sin tener que cargar nuevamente la página), puedes encontrarla en otro articulo de este sitio: Como escribir con Javascript texto y elementos en las páginas web

Crear acordeón en HTML para mostrar y ocultar elementos


Para crear el efecto de acordeón, que muestra y oculta elementos, no necesitamos JavaScript, solo unas líneas de HTML.
Mostrar código de acordeón
<details>
<summary>Mostrar código de acordeón</summary><br>
</details>
Mas información: Elementos poco usados de HTML5

Paginas relacionadas