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:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

<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

Mostrar o mesmo efeito usando uma classe CSS e o classList.toggle, que é mais limpo que mexer no style inline. Exemplo: no CSS uma classe .escondido { display: none } e no JS: var div = document.querySelector(‘#container’); btn.addEventListener(‘click’, function() { div.classList.toggle(‘escondido’) }); Explicar o PORQUÊ antes: assim a lógica de exibição fica no CSS e o JavaScript só liga e desliga a classe, o que deixa o código bem mais organizado quando o projeto cresce

Explicar que display: none tira o elemento do fluxo (ele some e não ocupa mais espaço na página) e visibility: hidden só deixa o elemento invisível, mas o espaço dele continua reservado no layout. Fechar dizendo qual usar em cada caso: display none quando quer sumir de vez, visibility hidden quando quer segurar o espaço

Antecipar o erro clássico do leitor: quando o display não está definido no style inline (só no CSS ou nem isso), o div.style.display vem vazio no começo, então a verificação if(div.style.display === ‘none’) pode não bater na primeira vez e o comportamento fica estranho. Mostrar a saída: definir um estado inicial de display no próprio JS ou no CSS, ou usar o classList.toggle da seção anterior, que não depende de ler o valor atual do style

Adicionar um bloco de perguntas e respostas curtas cobrindo variações da mesma busca: ‘Como esconder uma div ao carregar a página?’ (deixar a classe .escondido já no HTML ou setar display none no CSS), ‘Como esconder uma div sem botão?’ (disparar por outro evento, como submit, input ou por tempo), ‘Dá pra mostrar e esconder várias divs?’ (mesma lógica aplicada num querySelectorAll com laço). Respostas de 2 a 3 linhas cada