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 Exampletitle>
<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 Exampleh1>
<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> 
|
|
Login
Search
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | AU$15.00 |
| Due Date: | Jul 31 |
| Gross Amount: | AU$0.00 |
| Net Balance: | AU$0.00 |
| Left to go: | AU$15.00 |
 |
|
Did you know ?
You can solve problems for users who cannot post or login by disabling the HTTP referrer check (or by users allowing referrer information through the firewall).
Random question
Recent Q&A List
- How to minimize Spam...
- Is there any chance to connect...
- How to download files from XOOPS...
- I'm making a module/theme and...
- How to properly configure your...
- How can i verify all of my files...
- I would like to know if it's...
- Can someone point me to the...
- Sense of XOOPS_TRUST_PATH
- I using the theme phpkaox, but...
I made an outline, testing and tweaked until it worked beautifully, but every module I try to use with it strips the javascript out. So how to display this in the XOOPS interface?
I tried WF-Channel and TinyContent, neither will work.
Maybe this is obvious, but I can't see how to do it, except to just link to an outside html file, in which case, why post this instruction here?
Thanks in advance for any assistance.
Update:
I found out how here.