Ocultar o mostrar elementos HTML con JQuery - Javascript

En el desarrollo web, a menudo necesitamos ocultar o mostrar elementos HTML según ciertas condiciones o acciones del usuario. JQuery es una biblioteca de JavaScript que facilita esta tarea al proporcionar métodos sencillos para manipular elementos HTML.

Ocultar elementos HTML

Para ocultar un elemento HTML usando JQuery, puedes utilizar el método hide(). Este método oculta el elemento seleccionado estableciendo la propiedad CSS display en "none".

El siguiente código muestra cómo ocultar un elemento HTML con un identificador único (ID):

$("#elemento").hide();

También puedes ocultar varios elementos a la vez seleccionando una clase común a ellos. En este caso, se utiliza el método removeClass() para eliminar la clase que se encarga de mostrar los elementos y se aplica el método addClass() para añadir una clase que los oculte.

$(".elementos").removeClass("mostrar").addClass("ocultar");

Mostrar elementos HTML

Para mostrar un elemento HTML usando JQuery, puedes utilizar el método show(). Este método muestra el elemento seleccionado estableciendo la propiedad CSS display en su valor predeterminado (generalmente "block" o "inline").

El siguiente código muestra cómo mostrar un elemento HTML con un ID único:

$("#elemento").show();

También puedes mostrar varios elementos a la vez seleccionando una clase común a ellos. En este caso, se utiliza el método removeClass() para eliminar la clase que los oculta y se aplica el método addClass() para añadir una clase que los muestre.

$(".elementos").removeClass("ocultar").addClass("mostrar");

Alternar la visibilidad de elementos HTML

Si deseas que un elemento HTML se oculte si está visible y se muestre si está oculto, puedes utilizar el método toggle(). Este método alternará automáticamente la visibilidad del elemento seleccionado cada vez que se llame.

El siguiente código muestra cómo alternar la visibilidad de un elemento HTML con un ID único:

$("#elemento").toggle();

También puedes alternar la visibilidad de varios elementos a la vez seleccionando una clase común a ellos.

$(".elementos").toggle();

En resumen, JQuery proporciona métodos sencillos para ocultar o mostrar elementos HTML en respuesta a eventos o condiciones específicas. Estos métodos, como hide(), show() y toggle(), permiten manipular la visibilidad de los elementos seleccionados de una manera rápida y fácil.