JQuery

.toggle() | JQuery – Mostrar y ocultar elementos

Tabla de contenidos

La función toggle() de JQuery nos ayuda a mostrar y ocultar cualquier elemento, ya sea mediante su id o mediante su clase. Esta función se ejecuta al realizar una acción previamente programada (clic en un elemento, tiempo de carga, etc.).

Está función es equivalente a dos funciones de JQuery, estas funciones son las siguientes: .show() y .hide(); .toggle() realizará ambas funciones con un elemento si es que buscamos mostrarlo y ocultarlo de una manera más sencilla y sin necesidad de ejecutar mucho código dentro de nuestro sitio web.

Además .toggle() puede realizar animaciones al momento de mostrar y de ocultar los elementos; estas animaciones pueden configurarse al momento de programar nuestra función en nuestro código; las animaciones más comunes suelen relacionarse con el tiempo para aparecer y desaparecer uno o varios elementos.

 

Sintaxis

$(.selector).toggle();

Animación

Como te mencione anteriormente, la función de toggle() tiene la capacidad de aceptar animaciones para realizar la transición de mostrar y ocultar tu elemento; estas animaciones suelen estar relacionadas con el tiempo de aparición y ocultación de nuestro elemento; por lo regular, la animación que más se utiliza es la de slow.

$( "button" ).click(function() {
$( "#selector" ).toggle( "slow" );
});

Adrián Ramírez

Egresado de la Licenciatura en Informática por la UNAM. Actualmente trabajando como Desarrollador Web. Dentro de este blog compartiré todo el conocimiento que vaya adquiriendo día con día.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba