An easy method to create an expanding list using javascript. I've incorporated the code into some server status pages to show or hide tables. Effective and clean looking.
CODE:
-
<html>
-
<head>
-
<title></title>
-
-
<style>
-
ul { margin-top: 0px; margin-bottom:0px; }
-
-
ul.expand { display: none; }
-
-
li { list-style-type: none; display: block; }
-
-
img {
-
border: none;
-
vertical-align:
-
text-bottom;
-
}
-
</style>
-
-
<script>
-
function toggle(id)
-
{
-
var L = document.getElementById("L"+id);
-
var I = document.getElementById("I"+id);
-
if (L.style.display == "" || L.style.display == "none") {
-
L.style.display = "block";
-
I.src = "opened.gif";
-
}
-
else {
-
L.style.display = "none";
-
I.src = "closed.gif";
-
}
-
}
-
</script>
-
-
</head>
-
<body>
-
-
<h3>An Expanding List</h3>
-
-
<p>
-
Click on the red right-arrows to expand the list.
-
Click on the green down-arrows to contract the list.
-
</p>
-
-
<li><img onclick="toggle(1)" id="I1" src="closed.gif"/>Topic A
-
<ul class="expand" id="L1">
-
<li><img src="fixed.gif" />Topic A1</li>
-
<li><img onclick="toggle(2)" id="I2" src="closed.gif"/>Topic A2
-
<ul class="expand" id="L2">
-
<li><img src="fixed.gif" />Topic A21</li>
-
<li><img src="fixed.gif" />Topic A22</li>
-
<li><img src="fixed.gif" />Topic A23</li>
-
</ul>
-
</li>
-
<li><img src="fixed.gif" />Topic A3</li>
-
</ul>
-
</li>
-
-
<li>
-
<img onclick="toggle(3)" id="I3" src="closed.gif"/>Topic B
-
<ul class="expand" id="L3">
-
<li><img src="fixed.gif" />Topic B1</li>
-
<li><img src="fixed.gif" />Topic B2</li>
-
<li><img src="fixed.gif" />Topic B3</li>
-
</ul>
-
</li>
-
</body>
-
</html>
-
-
and here is how it works.
-
Timer Display
-
-
Animation, in its broadest sense means changing the content over time, usually withing small time intervals. In JavaScript, the key to animation is the setInterval function which causes a function to be called at periodic intervals.
-
This is perhaps the most basic example illustrating the usage of the setInterval function. The current time and date can be read into a string using an operation something like this:
-
-
timedate = new Date();
-
-
What we want to do is to depict the "running" time in our browser, i.e., we want it updated every second with a new value. Here is the example:
-
-
<html>
-
<head>
-
<title>Timer</title>
-
<script type="text/javascript">
-
<!--
-
function init()
-
{
-
showDate();
-
setInterval('showDate()', 1000);
-
}
-
function showDate()
-
{
-
var time = document.getElementById("time");
-
time.innerHTML = new Date();
-
}
-
// -->
-
</script>
-
</head>
-
<body onload="init();">
-
-
The current time and date on my system is:
-
<span style="color:red" id="time"></span>
-
-
</body>
-
</html>
Borrowed from http://www.cs.wcupa.edu/~rkline/Web/JavaScriptExamples.html
