How do I make a collapsible outline?
Requested and Answered by Carnuke on 2005/2/24 21:32:27
How do I make a collapsible outline?
A collapsible outline is a hidden section of a webpage that can be toggled 'visible' and 'invisible' or collapsed again. This is usually done with small + and - images. Here is an example of a complet page in html In fact we are using DHTML in this example. I have seen examples of this on the 7dana website, although this is not the sopecific code they use.
<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>
This Q&A was found on XOOPS Web Application System : https://xoops.org/modules/smartfaq/faq.php?faqid=409