Blogger Javascript

Mostrar-ocultar DIV con Javascript: 2 Métodos

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 2 métodos, el primero usando sólo Javascript y el segundo haciendo uso de la, todavía bastante popular, librería JQuery.

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.

Conclusión

Este par de 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.

2 Comentarios

  • Hola.
    He implementado esta función a mi blog y me he encontrado con un problema. No puedo añadirlo en más de una entrada ya que el div afecta a todas por igual y solo una se oculta. O se muestran todas. ¿Habría alguna manera de aplicar la etiqueta a más de un post seguido?
    Muchas gracias.
    Un saludo!

  • Hola!
    Queria saber si existe la posibilidad de ocultar algun contenido de una entrada y que se active unicamente cuando uno publica un comentario. Saludos y gracias!