ProgramingWeb

Mostrar y ocultar div en javascript

En este tutorial vamos a hacer un pequeño ejercicio para mostrar y ocultar un div cada vez que se presione un botón usando javascript y css.

Empecemos por lo básico, definamos una estructura html para nuestros elementos.

<div class="div">
  Mostrar / ocultar div con javascript
</div>

<section>
  <button id="btn">Ocultar</button>
</section>
  • Tenemos un 'div' con la clase 'div' que es el elemento que se mostrara y se ocultara.

  • Y un botón con un id 'btn' que es el elemento sobre el que se hará click.

Agregar el css para mostrar y ocultar nuestro elemento

.div {
  background: purple;
  width: 320px;
  padding: 1rem 2rem;
  color: aliceblue;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 0.5s linear;
}

.div.ocultar {
  opacity: 0;
}

section {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

button {
  padding: 0.5rem 1rem;
  background: violet;
  border: none;
  color: rgb(50, 50, 50);
  cursor: pointer;
}
  • Definimos estilos base al div para que se vea decente. Las propiedades 'opacity:1;' y 'transition: opacity .5s linear;' nos permitirán mostrar el div.

  • Luego con el selector ''.div.ocultar' le indicamos a css que si el elemento tiene esas dos clases a la vez tenga una opacidad de 0, lo que hará que el elemento se oculte.

  • Por último estilos al botón. que para este ejemplo no son importantes.

Agregando javascript para controlar cuando se muestra y oculta el div

const btn = document.querySelector("#btn")
const div = document.querySelector(".div")

let mostrarDiv = true

btn.addEventListener("click", e => {
  if (mostrarDiv) {
    mostrarDiv = false
    e.target.textContent = "Mostrar"
    div.classList.add("ocultar")
  } else {
    mostrarDiv = true
    e.target.textContent = "Ocultar"
    div.classList.remove("ocultar")
  }
})
  • Definimos dos constantes que seleccionan tanto al elemento 'div' como al button.

  • Establecemos una variable mostrarDiv en true.

  • Agregamos un evento de click al botón. Esto ejecuta una función con una condicional.

  • La condicional dentro del evento, primero verificará el estado de la variable mostrarDiv, si es true la cambia a false y modifica el texto del elemento a 'Mostrar', además agrega le agrega al elemento 'div' la clase 'ocultar' que es la encargada de hacer que el elemento se oculte.

  • Por ultimo la condicional también especifica que si la variable mostarDiv no es verdadera, cambie su valor a true y su texto sea 'ocultar', También elimina la clase 'ocultar' lo que hará que el elemento vuelva a ser visible.

NOTA: El código anterior solo hace que el elemento sea invisible, pero no lo elimina del html en caso de que quieras eliminarlo debes agregar a la clase .ocultar en css la propiedad 'display:none; y a la clase '.div' 'display:block;'