SmartFAQ is developed by The SmartFactory (https://www.smartfactory.ca), a division of InBox Solutions (https://www.inboxsolutions.net)

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(toggleIde)
{
    if (!
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">
AThe 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;">
    
aAn entry with no children.<br>
    
bAn entry with no children.<br>
    
cAn entry with no children.<br>
</
div>
</
div>
<
div onClick="toggle('two', event)">
<
img src="open.png" name="two_toggle">
BThe 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;">
    
aAn entry with no children.<br>
    
bAn entry with no children.<br>
    
cAn entry with no children.<br>
</
div>
</
div>
</
body>


The comments are owned by the author. We aren't responsible for their content.
user

 Then what?


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.

 


Login

Who's Online

162 user(s) are online (1 user(s) are browsing XOOPS FAQ)


Members: 0


Guests: 162


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Did you know ?

you can monitor all visitor activity through php-stats!

Random question

How can I add a photo to my user profile page?