Mostrar/ocultar DIV com Javascript

Invalid Date

Olá! Muitas vezes, é necessário exibir uma informação apenas quando o usuário solicita, como após o clique de um botão. Aqui está uma maneira simples e prática de fazer isso, mantendo o código limpo e funcional.

Observe que este conteúdo utiliza javascript puro e certamente podem haver maneiras mais eficientes de fazer isto a depender do seu caso de uso em particular. Caso seja necessário, entre em contato para auxílio profissional.

O Efeito de Alternância (Toggle)

A ideia é ter um botão que, ao ser clicado, mostra ou oculta um bloco de conteúdo. Podemos conseguir isso com uma única e simples função JavaScript.

O Código JavaScript

Em vez de usar duas funções (mostrar e fechar), podemos usar apenas uma função toggleVisibility que verifica o estado atual do elemento e o inverte. Isso torna o código mais limpo e eficiente.

function toggleVisibility(id) {
  const element = document.getElementById(id);
  if (!element.style.display || element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

Estrutura HTML

A estrutura HTML é direta. Você precisa de um elemento clicável (como um botão ou link) que chame a função e um div com um id único que contenha o conteúdo a ser ocultado.

<a onclick="toggleVisibility('ID_DO_SEU_CONTEUDO')">Clique para Mostrar/Ocultar</a>

<div id="ID_DO_SEU_CONTEUDO" style="display: none;">
  <p>Aqui vai o seu conteúdo...</p>
</div>

Vídeo Explicativo

O vídeo original que demonstrava o efeito pode ser acessado aqui: