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
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
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