Toggle

Índice

1. Usando javascript puro
2. Usando Jquery
3. Licencia

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

1 Usando javascript puro

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'
}
}

2 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.

3 Licencia

Este documento está bajo una Licencia Creative Commons Reconocimiento Unported 3.0