Prototype: Toggle

document.observe("dom:loaded", function() {

	// Visibility: ID and Element Selectors
	// This assumes CSS is set to display: none;
	$('id').observe('click', function() {
		$('otherID').toggle();
	});

	// Visibility: Class Selectors
	// This assumes CSS is set to display: none;
	$$('class').observe('click', function() {
		$$('.otherclass').toggle();
	});

	// CSS Styles: ID and Element Selectors
	$('id').observe('mouseover', function() {
		$('id').addClassName('red');
	});

	$('id').observe('mouseout', function() {
		$('id').removeClassName('red');
	});

	// CSS Styles: Class Selectors
	$$('.class').observe('mouseover', function() {
		$('.class').addClassName('red');
	});

	$$('.class').observe('mouseout', function() {
		$('.class').removeClassName('red');
	});

});