11 Voto

jQuery: Mostrar y Ocultar Elementos

Tutorial de Stefan Trost | 23/03/2021 a las 19:23

En este tutorial, me gustaría mostrarle cómo hacer desaparecer un elemento HTML visible o hacer que uno invisible sea visible nuevamente con la ayuda de JavaScript y jQuery.

Mostrar Elementos

Como punto de partida, tenemos el siguiente contenedor DIV invisible.

<div id="d" style="display:none">Invisible</div>

Nos gustaría mostrar este cuadro ahora. Para hacer visible un elemento HTML, jQuery proporciona la función .show(), que ahora solo llamamos con el ID del cuadro DIV (con un # precedente, nos referimos a IDs - con un . precedente classes).

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

Si el desvanecimiento es demasiado rápido o demasiado lento para nosotros, podemos pasar un valor de tiempo a la función como parámetro que indique cuánto tiempo debe tardar la función. El valor predeterminado es 400, si tarda el doble, podemos escribir .show(800).

Ocultar Elementos

Similar a la función .show(), jQuery proporciona la función .hide() para ocultar elementos.

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

Nuevamente, podemos pasar el tiempo como parámetro, por ejemplo .hide(200).

Toggle - Mostrar y ocultar Elementos alternativamente

A veces tenemos la situación en la que queremos hacer que un elemento sea visible o invisible alternativamente, dependiendo del estado en el que se encuentre actualmente el elemento. Pero no necesitamos escribir una función elaborada con .show() y .hide() porque jQuery da usamos la función .toggle().

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

Con .toggle(), el cuadro DIV con el ID "d" se mostrará aquí si está actualmente invisible u oculto si está visible actualmente.

ResponderPositivoNegativo

Sobre el Autor

AvatarPuede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil

 

Temas Relacionados

jQuery: Reemplazar elemento

Pregunta | 1 Respuesta

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.