home
CODE LIBRARY : Javascript Show Hide |
|
|
|
||
|
|
|
||
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.
Try these: show a1 show a2 show a3 show 'thiscanbeanything'
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. )
Want to try it out? Here's how.
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>
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, 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.</p>
</div>
<div id='a2' style="display:none;">
<h3>More on JPS</h3>
<p>The conclusions a writer must draw from this position were set forth in
"Qu'est-ce que la littérature?" (What Is Literature?), 1948: literature is
no longer an activity for itself, nor primarily descriptive of characters
and situations, but is concerned with human freedom and its (and the author's)
commitment. Literature is committed; artistic creation is a moral activity.</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 philosophical position is the
centre of their artistic being. Although drawn from many sources, for example,
Husserl's idea of a free, fully intentional consciousness and Heidegger's existentialism,
the existentialism Sartre formulated and popularized is profoundly original.
Its popularity and that of its author reached a climax in the forties, and Sartre's
theoretical writings as well as his novels and plays constitute one of the main inspirational
sources of modern literature. In his philosophical view atheism is taken for granted; the
"loss of God" is not mourned. Man is condemned to freedom, a freedom from all authority,
which he may seek to evade, distort, and deny but which he will have to face if he is to
become a moral being. The meaning of man's life is not established before his existence.
Once the terrible freedom is acknowledged, man has to make this meaning himself, has to
commit himself to a role in this world, has to commit his freedom. And this attempt to
make oneself is futile without the "solidarity" of others.</p>
</div>
