El método toggle() se utiliza para comprobar la visibilidad de los elementos seleccionados para alternar entre ocultar() y mostrar() para los elementos seleccionados.
- show() se ejecuta cuando el elemento está oculto.
- hide() se ejecuta cuando el elemento está visible.
Sintaxis:
$(selector).toggle(velocidad, aceleración, devolución de llamada)
Parámetros: Tiene tres parámetros opcionales:
- speed: Se utiliza para especificar la velocidad del efecto de alternancia. Puede ser en términos de milisegundos, lento o rápido.
- Easing: Se utiliza para especificar la velocidad del elemento en los diferentes puntos de la animación.
- devolución de llamada: la función que se llamará inmediatamente después del efecto de alternancia.
A continuación se muestra el ejemplo para mostrar el método toggle():
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#gfg").toggle();
});
});
</script>
<style>
#gfg {
color: green;
border: 5px solid black;
width: 200px;
text-align: center;
}
</style>
</style>
</head>
<body>
<div id="gfg">GeeksforGeeks</div>
<button>Click to hide() and show() the above div</button>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Después de hacer clic en el botón de nuevo: