Cómo ocultar un div con javascript

Actualizado : 2023-11-06

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

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

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi