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.
le="color: #000000"><?php <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