# Mostrar/ocultar DIV com Javascript

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](https://hellmrf.dev.br/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.

```javascript
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.

```html
<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:

<iframe allowfullscreen="" data-thumbnail-src="https://i.ytimg.com/vi/SQIUen6s1QY/0.jpg" frameborder="0" height="405" src="https://www.youtube.com/embed/SQIUen6s1QY?feature=player_embedded" width="720"></iframe>