Forum Moderators: open
Here's the code.
function flipLinks (id) {
var x = document.getElementById(id) if (x.style.visibility == 'hidden')
{
x.style.visibility = 'visible'
x.style.height = '';
}
else
{
x.style.visibility = 'hidden'
x.style.height = '0px'
}
}
function hideLinksOnLoad() {
var hide = new Array("testLinks",
"testLinks2")
for (i=0;i<hide.length;i++)
{
document.getElementById(hide[i]).style.visibility = 'hidden'
}
}
Here's the HTML
[code]<html>
<head>
<script src="tree.js"></script>
</head>
<body onload="hideLinksOnLoad()">
<layer>
<table border="0">
<tr>
<td>
<a href="#" onclick="flipLinks('testLinks')">Test</a>
</td>
</tr>
<tr>
<td>
<layer id="testLinks">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</layer>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="flipLinks('testLinks2')">Test</a><br />
</td>
</tr>
<tr>
<td>
<layer id="testLinks2">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</layer>
</td>
</tr>
</table>
</layer>
</body>
</html>
I'm trying to make it so that when they click the first link, it will push the 2nd link and everything below it down. However, it just hides it and there's a bunch of space inbetween the first and second link when both of the child layers are hidden.
The CSS property you should use for this is "display".
Moreover, you don't need to initialise the display values in an onload handler. These can be set via stylesheet. These can't be read directly from the element's style object in the toggling function, but that's no problem, we just test for the presence¦absence of a property string..
!elm.style.display
=> string is empty
=> stylesheet value used
=> element is not currently displayed.--------------------------
<html>
<head>
<style>
#testLinks{ display:none;}
</style>
<script>
function togDisplay(id, bool)
{
var style = document.getElementById(id).style;
style.display = style.display? '':'block';
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
<a href="#" onclick="togDisplay('testLinks')">Test</a>
</td>
</tr>
<tr>
<td>
<div id="testLinks">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</div>
</td>
</tr>
</table>
</body>
</html>
