Como esconder ou mostrar uma div com JavaScript

Neste artigo você aprenderá como esconder ou mostrar uma div com JavaScript puro, de uma maneira muito simples para utilizar nos seus projetos.

Veja o conteúdo em vídeo:

 

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e manipulação de DOM.

A ideia por trás de mostrar ou esconder uma div com JavaScript é bastante simples: precisamos apenas alterar a propriedade display do elemento

Desta maneira podemos alterar a sua exibição na página

Ou seja, com display none o elemento é escondido e com display como block o elemento será exibido

Vamos ver um exemplo prático:

<div id="container">Teste</div>
<button id="btn">Ação</button>

Este será o nosso HTML base, vamos ter uma div com um id de container e o button para criar um evento de click

Este evento que irá alterar a exibição do container

Veja o JavaScript necessário:

var btn = document.querySelector("#btn");

btn.addEventListener("click", function() {

    var div = document.querySelector("#container");
    
  if(div.style.display === "none") {
        div.style.display = "block";
    } else {
  	div.style.display = "none";
  }
    
});

Neste código adicionamos um evento ao botão e verificamos o valor de display

Alterando o mesmo para block ou none, dependendo da situação atual

Assim é possível alterar a exibição da div, ou seja, exibir a mesma ou esconder do nosso projeto web, simples não é? 🙂

Claro que no seu projeto o evento não precisa estar atrelado a um click e sim pela sua necessidade atual

Porém muitas das vezes alteramos o estado de um elemento a partir de um input do usuário, ou seja, algum evento

Conclusão

Neste artigo vimos como esconder e mostrar uma div com JavaScript

Apenas alteramos a propriedade de display dos estilos de um elemento para que exiba ou esconda o mesmo

Fazendo uma verificação por meio de if, checando o valor atual da propriedade

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube