Como esconder/mostrar uma div em HTML?
Neste artigo veremos as formas de como esconder/mostrar uma div em HTML – utilizando JavaScript com eventos ou regras de CSS.
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 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
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
E se eu quiser colocar para esconder e mostrar mais de uma div? tentei colocar aqui e não funcionou…
<script> function andamento() { var display = document.getElementById('andamento').style.display; //Seleciona a DIV "andamento" if(display == "none") { document.getElementById('andamento').style.display = 'block'; document.getElementById('entrega').style.display = 'none'; //Oculata a DIV id=entrega document.getElementById('historico').style.display = 'none'; //Oculata a DIV id=historico } } function entrega() { var display = document.getElementById('entrega').style.display; if(display == "none") { document.getElementById('entrega').style.display = 'block'; document.getElementById('andamento').style.display = 'none'; //Oculata a DIV id=andamento document.getElementById('historico').style.display = 'none'; //Oculata a DIV id=historico } } function historico() { var display = document.getElementById('historico').style.display; if(display == "none") { document.getElementById('historico').style.display = 'block'; document.getElementById('andamento').style.display = 'none'; //Oculata a DIV id=andamento document.getElementById('entrega').style.display = 'none'; //Oculata a DIV id=entrega } } </script> <label onclick="andamento()">EM ANDAMENTO</label> <label… Read more »
tenho duvidas sobre portugol, sou meirilaine de sete lagoas
gosto muito de html, me chamo pedro gabriel de sete lagoas e faco curso de tec.informatica