Ocultar o mostrar elementos con jQuery

En el caso de que queramos ocultar o mostrar elementos de una página con jQuery y dado que la librería jQuery nos abre un mundo de posibilidades, siempre contamos con varias opciones:

Posibilidad 1)

Para empezar, en la primera posibilidad vamos a utilizar las funciones de jQuery hide() y show(). Como su propio nombre nos da a entender, la función hide() oculta un elemento y la función show() lo muestra.Ambas funciones pueden recibir como parámetro la velocidad en la que se ejecuta. Vamos a verlo con un ejemplo en el que, en función del botón que pulsemos, se ocultará o se mostrará una capa. El árbol de directorios y ficheros va a ser el siguiente:

Copy to Clipboard

A continuación, en el archivo index.html, vamos a enlazar tanto el archivo de la librería jQuery como el archivo index.js, después vamos a crear una capa que se va a ocultar o mostrar y por último 2 botones que harán dichas funciones.

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

El archivo index.html será el siguiente:

Copy to Clipboard

En el archivo index.js, en función del botón que pulsemos diferenciándolos por su id, se va a ejecutar el hide() o el show() sobre el div.

El archivo index.js será el siguiente:

Copy to Clipboard

Posibilidad 2)

Entonces, siguiendo con las formas de ocultar o mostrar elementos, en vez de utilizar las funciones hide() y show(), las cuales son específicas para este tipo de propósitos, vamos a atacar directamente al estilo css del elemento mediante la función css() de jQuery. Esta función va a recibir 2 parámetros, el primero es el parámetro css que queremos modificar y el segundo su valor. Vamos a ver cómo quedaría el archivo index.js, ya que el index.html va a ser el mismo.

El archivo index.js será el siguiente:

Copy to Clipboard

De esta forma, cambiando el valor css “display” en función del botón que pulsemos, también podemos mostrar u ocultar elementos.

Posibilidad 3)

Otra posibilidad para ocultar o mostrar elementos con jQuery es añadir o eliminar una clase que exista en nuestro archivo css. Después, en el archivo index.js utilizaremos la función addClass() o removeClass() según el botón que pulsemos. Puesto que hemos añadido un archivo css nuevo a nuestro proyecto, el árbol de directorios y ficheros será el siguiente:

Copy to Clipboard

El archivo index.css será el siguiente:

Copy to Clipboard

El archivo index.js será el siguiente:

Copy to Clipboard

Posibilidad 4)

Finalmente, la última opción que manejaremos es el uso de la función toggle(). Esta función oculta un elemento si está visible o muestra un elemento si está oculto. Como con las funciones hide() y show(), también puede recibir como parámetro la velocidad con la que se va a ejecutar. Para este ejemplo, vamos a modificar el código de nuestro archivo index.html de manera que solamente haya un botón. También vamos a prescindir del archivo css, ya que no vamos a utilizar ninguna clase.

El archivo index.html será el siguiente:

Copy to Clipboard

El archivo index.js será el siguiente:

Copy to Clipboard

Como siempre, a continuación podrás encontrar una demo de como funciona cada ejemplo seguido de los archivos para descargar los proyectos enteros.

4.8 (95.91%) 44 votes

2020-10-09T09:27:57+00:00