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>

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