Ocultar y mostrar elementos en HTML con JavaScript 24b2t

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 112x5t

Es necesario ocultar elementos en las páginas por varias razones.

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

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.
Mostrar Ocultar

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

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

Ocultar elementos con CSS 5itb

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 231533

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 453436

La propiedad style.display ite los siguientes valores:
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>

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>

Ocultar o mostrar elementos con JQuery 3r333n

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 2z4e1q

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 , 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

Crear acordeón en HTML para mostrar y ocultar elementos 3d38

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

Recursos DE JavaScript t4t1v

Plantilla en formato de imagen con las funciones de JavaScript para manipular los elementos HTML del DOM de las páginas: JavaScript DOM Cheatsheet

Paginas relacionadas 486t3z