visibility tut

by samer taha

HTML

<h1>Controlling Visibility</h1>
<p id="intro">When the <code>visibility</code> property is used to hide elements, the position of surrounding elements remains unchanged. </p>
<p id="details">It's important to hide content <i>only</i> when JavaScript is enabled in the browser.</p>
<p>The page isn't reflowed when an element's <code>visibility</code> property is set to <code>hidden</code>.</p>
<div></div>

CSS

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #fff;
    color: #000;
    margin: 0 auto;
    width: 100%;
    max-width: 650px;
}
h1, p {
    margin-left: 10px;
    margin-right: 10px;
}
#details {
    margin-left: 50px;
}
#details i {
    visibility: visible;
}
.show {
    visibility: visible;
}
.hide {
    visibility: hidden;
}

JavaScript

(function () {
	// Get references to page elements and create a link dynamically
	var intro = document.getElementById('intro'),
		dets = document.getElementById('details'),
		a = document.createElement('a'),
		toggle;
	// Add the show class to the details paragraph
	dets.className = 'show';
	// Give the link an ID and text, then add it to the intro paragraph
	a.id = 'toggle';
	a.href = '#';
	a.appendChild(document.createTextNode('Hide details'));
	intro.appendChild(a);
	// Function to swap the class name and link text when clicked
	function showHide(e) {
		// Normalize the event for IE 8 and older
		e = event || window.event;
		if (dets.className === 'show') {
			dets.className = 'hide';
			toggle.innerHTML = 'View details';
		} else {
			dets.className = 'show';
			toggle.innerHTML = 'Hide details';
		}
		// Stop the link from being followed
		if (e.preventDefault) {
		    e.preventDefault();
		} else {
			return false;
		}
	}
	// Get a reference to the link and bind the showHide function to it
	toggle = document.getElementById('toggle');
	if (toggle.addEventListener) {
		// modern browsers
	    toggle.addEventListener('click', showHide, false);
	} else if (toggle.attachEvent) {
		// IE 8 and earlier
		toggle.attachEvent('onclick', showHide);
	}
}());