a collapsible outline, in which users can click a button to show or hide parts of the web page, can be created using dynamic HTML, also known as DHTML. The term "DHTML" refers to the things that can be accomplished using Javascript, cascading style sheets, and the document object model that allows the two to work together.
It is important to understand that not every web browser supports Javascript, cascading style sheets, and the document object model well enough to implement outlines. It is important to provide alternative ways to get the same information, such as a separate "simple HTML" version of the page which presents the entire outline as one continuous page or set of pages using ordinary <a href="URL...">> links.
The following example works in modern versions of Internet Explorer, and Mozilla and its derivatives including Netscape 6.0 and above; it should also work in any other browser that correctly supprots modern DHTML. Older browsers, handheld browsers, cell phone browsers and the like will display only the top level of the outline, and it is important to provide regular links to the same information for such users. Such links are also crucial to allow Google and other search engines to index your site:
Collapsible Outline Example
A. The first heading.
1. The first entry under the first heading.
a. An entry with no children.
b. An entry with no children.
c. An entry with no children.
B. The second heading.
1. The first entry under the second heading.
a. An entry with no children.
b. An entry with no children.
c. An entry with no children.
Here is the complete HTML source code for a simple page that implements this example:
<head>
<title>Collapsible Outline Example</title>
<script>
function toggle(toggleId, e)
{
if (!e) {
e = window.event;
}
if (!document.getElementById) {
return false;
}
var body = document.getElementById(toggleId);
if (!body) {
return false;
}
var im = toggleId + "_toggle";
if (body.style.display == 'none') {
body.style.display = 'block';
if (document.images[im]) {
document.images[im].src = "close.png";
}
} else {
body.style.display = 'none';
if (document.images[im]) {
document.images[im].src = "open.png";
}
}
if (e) {
// Stop the event from propagating, which
// would cause the regular HREF link to
// be followed, ruining our hard work.
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
}
</script>
</head>
<body>
<h1>Collapsible Outline Example</h1>
<div onClick="toggle('one', event)">
<img src="open.png" name="one_toggle">
A. The first heading.
</div>
<div id="one" style="display:none;">
<div onClick="toggle('one_a', event)">
<img src="open.png" name="one_a_toggle">
1. The first entry under the first heading.
</div>
<div id="one_a" style="display:none;">
a. An entry with no children.<br>
b. An entry with no children.<br>
c. An entry with no children.<br>
</div>
</div>
<div onClick="toggle('two', event)">
<img src="open.png" name="two_toggle">
B. The second heading.
</div>
<div id="two" style="display:none;">
<div onClick="toggle('two_a', event)">
<img src="open.png" name="two_a_toggle">
1. The first entry under the second heading.
</div>
<div id="two_a" style="display:none;">
a. An entry with no children.<br>
b. An entry with no children.<br>
c. An entry with no children.<br>
</div>
</div>
</body>
Adding a new heading is reasonably easy using this method. It could be done more elegantly if Javascript were made mandatory for viewing the page, but this is usually not a good decision except on Intranets where the webmaster has complete control over the user's choice of browser settings.
