Ocultar / Mostrar elementos de JavaScript

1. Utilice la propiedad style.visibility para ocultar / mostrar elementos HTML
2. Utilice la propiedad style.display para ocultar / mostrar elementos HTML
3. Utilice hide() / show() de jQuery para ocultar / mostrar elementos HTML
4. Utilice jQuery toggle() para ocultar / mostrar elementos HTML
5. Utilice addClass() / removeClass() para ocultar / mostrar elementos HTML

A menudo nos encontramos con situaciones en las que queremos alternar entre mostrar y ocultar un elemento. Este tutorial presenta cómo ocultar / mostrar un elemento en JavaScript.

Utilice la propiedad style.visibility para ocultar / mostrar elementos HTML

La propiedad style.visibility, cuando se establece en hidden, oculta el elemento de destino, pero no lo elimina del flujo. Entonces, el elemento de destino se representa pero no es visible. No afecta la distribución y permite que otros elementos ocupen su espacio natural. Podemos hacer que el elemento de destino sea visible nuevamente estableciendo la propiedad de nuevo en visible.

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

Utilice la propiedad style.display para ocultar / mostrar elementos HTML

La propiedad style.display, cuando se establece en none, elimina el elemento de destino del flujo normal de la página y permite que el resto de los elementos ocupen su espacio. Aunque el elemento de destino no está visible en la página, aún podemos interactuar con él a través de DOM. Todos los descendientes se ven afectados y no se muestran como el elemento padre. Podemos hacer que el elemento de destino sea visible nuevamente estableciendo la propiedad en block. Es aconsejable establecer display como '' porque block añade un margen a un elemento.

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

Utilice hide() / show() de jQuery para ocultar / mostrar elementos HTML

El método show() nos ayuda a mostrar elementos ocultos a través del método display:none o jQuery hide(). No puede mostrar elementos que tengan su visibilidad oculta. Acepta los siguientes tres parámetros:

1. Velocidad: especifica la velocidad de retardo del efecto de desvanecimiento.
2. Facilidad: especifica la función de facilitación utilizada para la transición a un estado visible / oculto. Toma dos valores diferentes: swing y linear.
3. Callback: Es una función que se ejecuta una vez finalizada la ejecución del método show().

Del mismo modo, el método jQuery hide() ayuda a ocultar los elementos seleccionados. Toma los mismos 3 parámetros que show().

$('#element').hide();  // hide
$('#element').show();  // show

Utilice jQuery toggle() para ocultar / mostrar elementos HTML

El jQuery toggle() es un método especial que nos permite alternar entre el método hide() y show(). Ayuda a hacer visibles los elementos ocultos y ocultos los elementos visibles. También toma los mismos tres parámetros que los métodos hide() y show() de jQuery. También necesita una pantalla de 4º parámetro que ayuda a alternar el efecto de ocultar / mostrar. Es un parámetro booleano que, cuando se establece en falso, oculta el elemento.

$('div.d1').toggle(500, swing);  // toggle hide and show

Utilice addClass() / removeClass() para ocultar / mostrar elementos HTML

La función addClass() nos ayuda a agregar una clase a la lista de clases existente de un elemento, y removeClass() nos ayuda a eliminarla. Podemos usar estas funciones para alternar entre ocultar y mostrar escribiendo una clase personalizada que oculte el elemento y luego agregándolo y eliminándolo de la lista de clases.

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show