Ilovephp.org - programming with passion

wait

Programming tutorials - Expandation (JavaScript)

It is possible that sometimes you need a few links that when are clicked to one an content on the same page, this thing is frequently seen in FAQs.
This thing could be done quite easy with javascript.
In the beginning we make a few links and so many divs as links numbers and specify in href atribute of a tag the javascript value: expand('ID');, where ID is the id of div.
The divs must be hidden, and this thing could be done whit CSS by appeal of display style with propiety none.
But you will want to open and close all by one click, so you must do two more links, Expand all and Close all, and in href atribute appeal the javascript function expand_all, about we speak below, with value on or off.
All content, links and divs that openes in the moment when their are clicked must be engage in other div with id content.

<a href="javascript: expand_all('on');" >Expand all</a> |
<a href="javascript: expand_all('off');" >Close all</a><br /><br />
<div id="content">
<a href="javascript: expand('a1');" >Link 1</a><br />
<div id="a1" style="display:none;">Expanded text 1</div>
<a href="javascript: expand('a2');" >Link 2</a><br />
<div id="a2" style="display:none;">Expanded text 2</div>
<a href="javascript: expand('a3');" >Link 3</a><br />
<div id="a3" style="display:none;">Expanded text 3</div>
<a href="javascript: expand('a4');" >Link 4</a><br />
<div id="a4" style="display:none;">Expanded text 4</div>
</div>

Let see what is happening when you click one of that links. I told you above that every link must have a javascript value of href atribute expand('ID'), where ID is the div id that is opened or closed. When you click this type of link, you appeal expand() function. This is getting the ID value that is the same with the div id and analize it if the div is visible or not. If it is not visible we make it to be by appealing of display property with a null value but if it is visible we will hide it by appealing of display property but with value none.
Remark that JavaScript is an object orientated programming language, in this way we make reference to that div that is attending to be opened or closed, then we appeal display property. I could say that is like a tree, beginning with the trunk and arrive to the leafs, but is logically that you will pass through many twigs, and those twigs must be parts of that tree. In our example we appeal for the first time the document, then we see of who is the sent id (the function's value) by appealing of getElementByIb() method. Only for that object we set the property style and display. All will be like in this way: document -> of_who_is_this_id(id) -> apply_style_for_this_element - > apply_display_for_style -> set_a_value_for_display.

function expand(divid){
var div = document.getElementById(divid);
var status = div.style.display;
if(status == "none") div.style.display = "";
else div.style.display = "none";
}

When you click the links for opening or closing all those divs, you appeal in fact expand_all() function that you send it a value for open or for close all those divs.
Memorize that in the beginning when we made those divs and links I told you to frame all in a biger div with id content. Now we refer to it and we'll count all divs that are included in it by appealing of getElementsByTagName('div') method together with length property.
We initiate an for starting with 1 and stoping when variable i is equal with the numbers of hidden divs, and for every div, in function of the value sent, we appeal the property display with the null value or none. Evidently we must refer to that div by appeal of getElementById(id) method, that is why I suggest you that any id you set for those divs to contain an consecutive number, in fact is an obligatory criterion for work.

function expand_all(stat){
var divs = document.getElementById("content").getElementsByTagName("div").length;
for(var i = 1; i <= divs; i++){
var div = document.getElementById("a"+i);
if(stat == "on") div.style.display = "";
else div.style.display = "none";
}
}

Below you have the entire HTML and JavaScript source code. You could add as many links as you want and so many divs but you should remember the rules above. You could put not just text like in this tutorial but any thing you want in those divs, like tables, other divs, images, flash...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript Expansion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
function expand(divid){
var div = document.getElementById(divid);
var status = div.style.display;
if(status == "none") div.style.display = "";
else div.style.display = "none";
}
function expand_all(stat){
var divs = document.getElementById("content").getElementsByTagName("div").length;
for(var i = 1; i <= divs; i++){
var div = document.getElementById("a"+i);
if(stat == "on") div.style.display = "";
else div.style.display = "none";
}
}
//-->
</script>
</head>
<body>
<a href="javascript: expand_all('on');" >Expand all</a> |
<a href="javascript: expand_all('off');" >Close all</a><br /><br />
<div id="content">
<a href="javascript: expand('a1');" >Link 1</a><br />
<div id="a1" style="display:none;">Expanded text 1</div>
<a href="javascript: expand('a2');" >Link 2</a><br />
<div id="a2" style="display:none;">Expanded text 2</div>
<a href="javascript: expand('a3');" >Link 3</a><br />
<div id="a3" style="display:none;">Expanded text 3</div>
<a href="javascript: expand('a4');" >Link 4</a><br />
<div id="a4" style="display:none;">Expanded text 4</div>
</div>
</body>
</html>