Una de las tareas más básicas que se suelen ocupar al diseñar la experiencia de interacción en un sitio web es mostrar-ocultar un DIV con Javascript o en general de cualquier elemento HTML. En este pequeño tutorial te mostraremos 3 métodos, el primero usando sólo Javascript y el segundo haciendo uso de la, todavía bastante popular, librería JQuery.

Contenidos ocultar
1 Mostrar-ocular DIV con Javascript puro
1.1 Ejemplo de ocultar/mostrar div:
2 Mostrar-ocultar (toggle) DIV con jQuery
3 Mostrar-ocultar elemento cuando usas Bootstrap
4 Conclusión

Mostrar-ocular DIV con Javascript puro

Primero haremos uso de una sencilla función que revisa el estado del elemento HTML y lo oculta o muestra según el resultado.

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

    mostrar(div);
}
</script>

Como cualquier otro código de Javascript puedes colocarlo entre las etiquetas <head></head> o agregarlo a tu archivo .js externo.

Esta función requiere que se indique el identificador ID del elemento HTML que se desea mostrar-ocultar y su funcionamiento es básicamente el siguiente:

  1. Obtiene el objecto DOM basado en la ID indicada.
  2. Obtiene la condición actual real de la propiedad display del elemento usando getComputedStyle.
  3. Cualquier condición diferente a none significa que es muy posible que elemento es visible y por tanto lo oculta. De otro modo, lo muestra porque implica que estaba oculto.

Ejemplo de ocultar/mostrar div:

Supongamos que tenemos un elemento HTML: DIV con un ID “mi-super-contenido”; similar al siguiente:

<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>

Y queremos mostrarla con enlace que dice: “Mostrar/ocultar contenido”. Muy claro ¿no? Bueno, lo único que debemos hacer es agregar un llamada la función de Javascript que definimos arriba y el ID del elemento que queremos afectar, en este caso “mi-super-contenido”. El resultado sería algo así:

<a style='cursor: pointer;' onclick="mostrarOcultar('mi-super-contenido')">
    Mostrar/ocultar contenido
</a>

Y listo. Ahora cuando tus lectores den click a ese link, el contenido del DIV se mostrará o ocultará según corresponda.

Nota: Si el estado inicial del contenido es oculto, es necesario agregar el CSS correspondiente para ocultar el elemento. En este caso:

#mi-super-contenido { display:none; }

Que se puede agregar a tu archivo externo .css.

Mostrar-ocultar (toggle) DIV con jQuery

Si ya estás usando la librería jQuery en tu sitio, no es necesario crear una función nueva y usar la función toggle, incluida en jQuery.

Por ejemplo, supongamos que el DIV al que le vamos a cambiar su visualización tiene ID: "mi-super-contenido" y enlace que lo muestra tiene como ID: "mostrar-super-contenido". Entonces el Javascript sería:

<script>
$( "#mostrar-super-contenido" ).click( function() {
    $( "#mi-super-contenido" ).toggle();
});
</script>

Y el HTML sería el siguiente:

<a id="mostrar-super-contenido">Mostrar/ocultar contenido.</a>
<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>

El código usando JQuery es mucho más compacto pero claro, se debe a que la función real esta dentro de la librería.

Mostrar-ocultar elemento cuando usas Bootstrap

Bootstrap 5 proporciona una forma sencilla de mostrar y ocultar grandes cantidades de contenido utilizando su función de colapsar (collapse).

Paso 1: Agregar la clase `.collapse`

El primer paso es indicar qué elemento será colapsable agregando la clase .collapse a un elemento <div>. Por ejemplo:

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

Paso 2: Agregar un botón o enlace para controlar el elemento colapsable

A continuación, necesitarás agregar un botón o enlace que controle la acción de mostrar y ocultar el elemento colapsable. Para ello, utiliza la clase data-bs-toggle="collapse" en un elemento <button> o <a>. Luego, agrega el atributo data-bs-target="#id" para conectar el botón o enlace con el elemento colapsable. Aquí tienes un ejemplo:

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

Si prefieres utilizar un enlace en lugar de un botón, puedes reemplazar el elemento <button> por un elemento <a> y utilizar el atributo href en lugar de data-bs-target. Por ejemplo:

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

Paso 3: Mostrar el contenido por defecto

Por defecto, el contenido colapsable estará oculto. Si deseas mostrar el contenido por defecto, puedes agregar la clase .show al elemento colapsable. Aquí tienes un ejemplo:

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

Conclusión

Estas 3 soluciones son bastante básicas pero soluciones más complejas se pueden construir usando el mismo principio. También cabe mencionar que como muchos problemas en programación, hay varias formas de resolver el mismo, algunas soluciones son más adecuadas o completas que otras pero yo te recomendaría la que tú mejor entiendas, de ese modo si requieres adaptarla o mejorarla tendrás probabilidad de éxito.