Como esconder/mostrar uma div em HTML?

Publicado em 26/05/2020
Atualizado em 23/07/2026

Neste artigo veremos as formas de como esconder/mostrar uma div em HTML – utilizando JavaScript com eventos ou regras de CSS.

como esconder mostrar uma div no html js css capa

Fala programador beleza? Bora aprender mais sobre HTML, CSS e JS!

Veja este conteúdo em vídeo:

Há duas formas que são amplamente utilizadas para esconder e mostrar divs do HTML:

Regras de CSS;
Manipulação de um evento aplicando estilo a div;

No fim das contas até a maneira pelo JavaScript, se torna uma aplicação de estilo de CSS

Vamos ver na prática as duas possibilidades

Esconder/mostrar uma div com CSS

A ideia aqui é que temos uma div no nosso código HTML, e vamos aplicar uma regra de CSS a ela para esconde-la

Para isso temos que utilizar a propriedade display e o valor none

Veja o código:

<!DOCTYPE html>
<html>
<head>
    <title>Escondendo a div no HTML</title>
    <meta charset="utf-8">
</head>
<body>
<div class="container">
    <p>Esta div não será exibida</p>
</div>
</body>
</html>

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Perceba a div com classe de container, é ela que vamos acessar e adicionar a regra

Veja o código necessário:

.container {
    display: none;
}

Assim você vai ocultar a div da sua página, caso queira exibi-la novamente, mude none para block ou apague esta regra

Esconder/mostrar uma div com JavaScript

Para alterar o estilo ou exibição da div com JavaScript, é necessário fazer o acesso do elemento via DOM (Document Object Model)

E mudar a sua propriedade display para none ou block, conforme precisarmos

Vamos criar um botão para fazer o evento:

<!DOCTYPE html>
<html>
<head>
    <title>Escondendo a div no HTML</title>
    <meta charset="utf-8">
</head>
<body>
<div class="container">
    <p>Esta div não será exibida</p>
</div>
<button id='btn-div'>Ocultar/mostrar div</button>
</body>
</html>

E o nosso código JavaScript ficará assim:

var btn = document.getElementById('btn-div');
var container = document.querySelector('.container');
btn.addEventListener('click', function() {
    
  if(container.style.display === 'block') {
  	container.style.display = 'none';
  } else {
  	container.style.display = 'block';
  }
});

Então mapeamos o botão em uma variável e acessamos no evento de click a propriedade display do .container

Caso ele esteja visível, será escondido e caso esteja visível, será exibido

Desta forma podemos esconder ou exibir uma div com JS

Conclusão

Neste artigo vimos como esconder/mostrar uma div em HTML

Basicamente precisamos acessar a propriedade display do elemento alvo

Seja por CSS ou JavaScript e alterar para block, caso queiramos exibi-lo ou para none se desejarmos esconde-lo

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

Adicionar um bloco curto ‘display: none ou visibility: hidden?’ explicando a diferença prática entre os dois jeitos de ocultar

Muita gente cai aqui procurando ocultar uma div e não sabe que existe mais de um caminho no CSS

Com display: none a div some e o espaço dela some junto, o layout se reorganiza como se ela nunca tivesse existido

Já com visibility: hidden a div fica invisível, mas o espaço dela continua reservado na página, meio que um fantasma ocupando o lugar

Mostrar as duas regras lado a lado:

.container { display: none; }

.container { visibility: hidden; }

Então a dica é: se quer sumir com tudo e fechar o buraco, usa display: none, se quer esconder mas segurar o espaço, usa visibility: hidden

Acrescentar um jeito alternativo de fazer o toggle usando classe de CSS em vez de mexer no display inline, que costuma ser mais organizado

Em vez de setar o display na mão pelo JavaScript, tu cria uma classe no CSS que esconde:

.escondido { display: none; }

E no JavaScript só adiciona ou remove essa classe no clique:

var btn = document.getElementById(‘btn-div’); var container = document.querySelector(‘.container’);

btn.addEventListener(‘click’, function() { container.classList.toggle(‘escondido’); });

O classList.toggle faz o trabalho sozinho: se a classe estiver lá, ele tira, se não estiver, ele bota

Assim o estilo fica todo no CSS e o JavaScript só cuida da lógica, bem mais limpo

Adicionar um trecho sobre o atributo hidden do HTML, que é a forma mais direta de esconder um elemento sem escrever CSS nem JS

Existe um caminho ainda mais rápido pra sumir com uma div: o atributo hidden, que já vem no próprio HTML

<div class="container" hidden> <p>Esta div não será exibida</p> </div>

Colocou o hidden, a div já nasce escondida, sem precisar de uma linha de CSS

Pra mostrar de novo via JavaScript é só tirar o atributo:

container.hidden = false;

É prático pra casos simples, mas se tu precisa de controle fino do layout, os caminhos de CSS ainda mandam melhor

Adicionar um FAQ curto com as dúvidas que orbitam o tema:

Qual a diferença entre display: none e visibility: hidden? O display: none tira a div e o espaço dela do layout, a página se fecha no lugar. O visibility: hidden deixa a div invisível mas mantém o espaço reservado

Como mostrar a div de novo depois de esconder? Se usou display: none, troca pra display: block (ou o valor original). Se escondeu por JavaScript, é só inverter a propriedade ou dar toggle na classe

Dá pra esconder uma div sem usar CSS? Dá, com o atributo hidden direto na tag HTML, ou manipulando o elemento pelo JavaScript

Esconder a div com display: none tira ela do código? Não, a div continua no HTML e no DOM, ela só não aparece na tela. Quem inspeciona a página ainda enxerga o elemento

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn