JavaScript

Como esconder ou mostrar uma div com JavaScript

26 de agosto de 2020

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.

esconder ou mostrar div javascript capa

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:

<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

Subscribe
Notify of
guest
5 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
joabe

Boa tarde, seu quisesse pegar pelo id

Battisti

Pode utilizar o querySelector ou o getElementById…

Diogo Barbosa

Boa tarde Matheus,

Primeiramente parabéns pelas suas dicas.

Tenho uma dúvida, fiz seu exemplo, só que coloquei o elemento iniciando como “displaynone;” no css.

Mas tive um problema preciso clicar duas vezes pro container se exibido, coloquei um console.log no laço e vi que a função cai diretamente no “else if”.

preciso que elemento seja iniciado oculto e que a ação do usuário mostre-o.

Como posso resolver ?

Battisti

opa Diogo, vc pode tentar utilizar uma abordagem de adicionar a classe ao clicar em um determinado elemento, ou remover uma classe que está com display none…

William

Este codi é simples e e só adaptar e estilizar.

Adicionando e ocultando div

*{margin:0; padding:0;}
body{
margin:0; padding:0; background:#ebebeb;}
#div_nome{
margin-top: 10px;
margin-left: 10px;
width: 330px;
border-radius: 0.3em;
box-shadow: 0 0 10px #666;
background-color: #F9F9F9;
display: none;
text-align: left;
}

function aparecer(){
document.getElementById(“div_nome”).style.display = “block”;
}
function desaparecer(){
document.getElementById(“div_nome”).style.display = “none”;
}

Aparecer div ↕️

🔙 desaparecer ❎
Aparece
conteudo da div 💬

5
0
Would love your thoughts, please comment.x