javascript

Toggle

Hoy comentaré como hacer la típica función toggle para hacer que aparezca y desaparezca un div de varias maneras distintas:

Usando Javascript plano

Esta es la mejor opción si no queremos estar descargándonos el jquery ó simplemente no queremos usarlo.


function toggle-js(div){
var div = document.getElementById(div)
if (div.style.display == 'none') {
div.style.display = 'block'
} else {
div.style.display = 'none'
}
}

Usando Jquery

Eso mismo que hemos hecho podemos hacerlo usando selectores jquery


function toggleJquery() {
if ($('#div').css('display') == 'none') {
$('#div').css('display', 'block');
} else {
$('#div').css('display', 'none');
}
}

Aunque si queremos usar jquery lo más cómodo es usar la función toggle que ya viene predefinida. Podemos utilizarla de la siguiente manera:

$('#div').toggle();

Merece la pena echarle un vistazo a la documentación de la función toggle, ya que esta función es muy potente y presenta muchas opciones.

Estándar

One thought on “Toggle

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s