Imagen destacada del artículo Cómo ocultar un div con javascript

Cómo ocultar un div con javascript

javascript svg
actualizado: 16 / 07 / 2022

Aprender a manipular el DOM usando javascript es muy importante en nuestro día a día como desarrollador frontend.

En este tutorial realizaremos un pequeño ejercicio en el que mostraremos y ocultaremos un div usando unas pocas líneas de javascript, al final de este post tendrás todo el código para verlo y ejecutarlo en codepen.

Estructura html para este ejemplo

html
<h2>Mostrar / ocultar div - JS</h2>
<button class="hide">Ocultar</button>
<button class="show">Mostrar</button>
<div class="div">
<p>
Este es el div y el contenido que se debe ocultar y mostrar condicionalmente
usando javascript.
</p>
</div>

Estilos de los elementos antes de ocultar el elemento con JS

css
.div {
margin-top: 1rem;
max-width: 400px;
box-shadow: 0 0 1px #000;
padding: 1rem;
opacity: 1;
transition: 0.2s all linear;
}
.div_hide {
opacity: 0;
}
button {
border: none;
padding: 0.5rem 1rem;
background: #d90e52;
color: white;
cursor: pointer;
}
.show {
background: #0c7d97;
}

Agregarmos unos pocos estilos para mejorar un poco la estética de nuestros elementos, lo más importante a resaltar de este css es la opacidad que establecemos a la clase .div para que este visible.

Luego con la clase .div_hide establecemos la opacidad en 0 para ocultar el elemento. NOTA: esta clase no debe ser agregada al div por default, a continuación nos encargaremos de añadir y quitar esta clase usando javascript.

Código javascript para ocultar y mostrar el contenido de un div

js
const div = document.querySelector("div");
document.querySelector(".hide").addEventListener("click", () => {
div.classList.add("div_hide");
});
document.querySelector(".show").addEventListener("click", () => {
div.classList.remove("div_hide");
});

Referenciamos ambos botones desde javascript con el método querySelector() y agregamos un evento de click que agregará o removerá la clase div_hide usando el método classList sobre el el div que previamente definimos en html.

Ejemplo en codepen

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css