Affordable Web Hosting with Excellent Customer Support internet connection free month hosting

Javascript Show Hide Element

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.

Example

Try these: show a1 show a2 show a3 show 'thiscanbeanything'


Sample text:

Jean-Paul Sartre, (1905-1980) born in Paris in 1905, studied at the École Normale Supérieure from 1924 to 1929 and became Professor of Philosophy at Le Havre in 1931. With the help of a stipend from the Institut Français he studied in Berlin (1932) the philosophies of Edmund Husserl and Martin Heidegger. After further teaching at Le Havre, and then in Laon, he taught at the Lycée Pasteur in Paris from 1937 to 1939. Since the end of the Second World War, Sartre has been living as an independent writer.


( Content not in one of your areas to show or hide. )

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>