Mostrar e ocultar DIV com Javascript: 3 métodos

Uma das tarefas mais básicas com as quais geralmente lidamos ao projetar a experiência de interação em um site é mostrar e ocultar um DIV com Javascript ou, em geral, qualquer elemento HTML. Neste pequeno tutorial, mostraremos três métodos, o primeiro usando apenas Javascript e o segundo usando a biblioteca JQuery, ainda bastante popular.

Mostrar DIV ocular com Javascript puro

Primeiro, usaremos uma função simples que verifica o estado do elemento HTML e o oculta ou o mostra, dependendo do resultado.

<script type="text/javascript">
const mostrar = (elemento) => {
    elemento.style.display = 'block';
}
const ocultar = (elemento) => {
    elemento.style.display = 'none';
}
const showHide = (id) => {
    let div = document.getElementById(id);
    if( window.getComputedStyle(div).display !== 'none' ){
      ocultar(div);
      return false;
    }

    mostrar(div);
}
</script>

Como qualquer outro código JavaScript, você pode colocá-lo entre as tags ou adicioná-lo ao seu arquivo .js externo.

Essa função exige que você especifique o identificador de ID do elemento HTML que deseja exibir e ocultar, e sua operação é basicamente a seguinte:

1. Obtém o objeto DOM com base no ID fornecido.
2. Obtém a condição atual real da propriedade de exibição do elemento usando getComputedStyle.
3. Qualquer condição diferente de none significa que é bem possível que o elemento esteja visível e, portanto, oculta-o. Caso contrário, ele o exibe porque isso implica que o elemento está visível. Caso contrário, ele o exibe porque isso implica que ele estava oculto.

Exemplo de div. ocultar/exibir

Suponha que tenhamos um elemento HTML: DIV com um ID “my-super-content”; semelhante ao seguinte:

<div id="my-super-content">Aqui vai meu conteúdo secreto, mas não tanto.</div>

E queremos exibi-lo com um link que diz: “Mostrar/ocultar conteúdo”. Bastante claro, não é? Bem, tudo o que precisamos fazer é adicionar uma chamada à função Javascript que definimos acima e o ID do elemento que queremos afetar, neste caso “my-super-content”. O resultado seria algo parecido com isto:

<a style='cursor: pointer;' onclick="showHide('my-super-content')">
    Mostrar/ocultar conteúdo
</a>

E é isso. Agora, quando seus leitores clicarem nesse link, o conteúdo do DIV será mostrado ou ocultado de acordo.

Observação: Se o estado inicial do conteúdo for oculto, você precisará adicionar o CSS correspondente para ocultar o elemento. Nesse caso:

#my-super-content { display:none; }

Que pode ser adicionado ao seu arquivo .css externo.

Mostrar e ocultar (alternar) DIV com jQuery

Se já estiver usando a biblioteca jQuery em seu site, não será necessário criar uma nova função e usar a função toggle, incluída no jQuery.

Por exemplo, vamos supor que o DIV que vamos alterar a exibição tenha ID: "my-super-content" e o link que o exibe tem ID: "show-super-content". Então o Javascript seria:

<script>
$( "#show-super-content" ).click( function() {
    $( "#my-super-content" ).toggle();
});
</script>

E o HTML seria o seguinte:

<a id="show-super-content">Mostrar/ocultar conteúdo.</a>
<div id="my-super-content">Aqui vai meu conteúdo secreto, mas não tanto.</div>

O código que usa JQuery é muito mais compacto, mas é claro que isso se deve ao fato de a função real estar dentro da biblioteca.

Mostrar e ocultar elemento ao usar o Bootstrap

O Bootstrap 5 oferece uma maneira simples de mostrar e ocultar grandes quantidades de conteúdo usando sua função de colapso.

Etapa 1: Adicionar a classe .collapse

A primeira etapa é indicar qual elemento será recolhível, adicionando a classe .collapse a um elemento <div>. Por exemplo:

<div id="demo" class="collapse">
    Lorem ipsum dolor text.... 
</div>

Etapa 2: Adicione um botão ou link para controlar o elemento recolhível

Em seguida, você precisará adicionar um botão ou link que controle a ação de mostrar e ocultar o elemento recolhível. Para fazer isso, use a classe data-bs-toggle="collapse" em um elemento <button> ou <a>. Em seguida, adicione o atributo data-bs-target="#id" para conectar o botão ou link ao elemento recolhível. Aqui está um exemplo:

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>

Se preferir usar um link em vez de um botão, você pode substituir o elemento <button> por um elemento <a> e usar o atributo href em vez de data-bs-target. Por exemplo:

<a href="#demo" data-bs-toggle="collapse">Collapsible</a>

Etapa 3: exibir o conteúdo padrão

Por padrão, o conteúdo recolhível estará oculto. Se quiser mostrar o conteúdo padrão, você pode adicionar a classe .show ao elemento recolhível. Aqui está um exemplo:

<div id="demo" class="collapse show">
    Lorem ipsum dolor text.... 
</div>

Conclusão

Essas três soluções são bastante básicas, mas é possível criar soluções mais complexas usando o mesmo princípio. Também vale a pena mencionar que, como em muitos problemas de programação, há várias maneiras de resolver o mesmo problema. Algumas soluções são mais adequadas ou completas do que outras, mas eu recomendaria aquela que você entende melhor, pois assim, se precisar adaptá-la ou aprimorá-la, terá probabilidade de sucesso.