Toggle

Table of Contents

Today, I will comment how to make the typical toggle function to make to appear and disappear a div on different ways:

Using Pure Javascript

This is the best option if we don't want to be dowloading the jquery o simply we don't want use it.

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

Using Jquery

That's the same that we have done using jquery selectors

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

Although if we want jquery the best comfortable is use the function toggle that is predefined. We can use it that it's predefined. We can use it on the next way:

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

It deserves the take a look to the documentation of the toggle function, because this function is very powerful and it presents many options.

License

Author: David Arroyo Menéndez

Created: 2013-10-17 jue 21:57

Emacs 24.2.1 (Org mode 8.2.1)

Validate