Javascript – Show Hide Element

Posted onAuthorHeelpBook

If you have a section that you want to control with links, this is one way to do it.This method uses javascript to show or hide an element, by changing the display property of the element. It is targeted using the element's id.
You could also have used an inline frame, or frames- but those methods are not search engine friendly. Search engines will not be able to read the content of those- and your visitors will have to wait for each option to load. This is a clean method to show different content in an area. This allows you to load all your content first, also lets the search spiders read and indes the content. Furthermore, it lets you neatly arrange your content on one page.

Usage

Want to try it out? Here's how.

Step 1

Place this code between the <head> tags in your webpage.

<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','thiscanbeanything');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id

	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>

Step2

This is example html you can use, this goes inside your html body.

<p>Try these: <a href="javascript:switchid('a1');">show a1</a>
<a href="javascript:switchid('a2');">show a2</a>
<a href="javascript:switchid('a3');">show a3</a>
<a href="javascript:switchid('thiscanbeanything');">show 'thiscanbeanything'</a></p>

<hr/>
	<div id='a1' style="display:block;">
		<h2>Sample text:</h2>
		<p><b>Jean-Paul Sartre, (1905-1980)</b> born in Paris in 1905...</p>
	</div>
	<div id='a2' style="display:none;">
		<h3>More on JPS</h3>
		<p>The conclusions a writer must draw from this position...</p>

	</div>

	<div id='a3' style="display:none;">

		<p>Yet more content. This can be anything in here, html,
		pictures.. flash ...</p>
	</div>

	<div id='thiscanbeanything' style="display:none;">
		<h3>This content is in a div with id "thicanbeanything"</h3>	
			<p>Sartre is one of those writers for whom a determined...</p>
	</div>
SOURCE

LINK

LANGUAGE
ENGLISH