Garadon
11-23-2002, 04:04 PM
This is a vertical collaps menu I made
<html>
<head>
<script language='javascript1.2'>
//Scrit Name:Collapsable Menu V2.0
//Created By:Garadon
//E-Mail:Shashalak@hotmail.com
//Homepage:www.the-hive.dk/~donp/
function expand(value)
{
var antal=3;
var i=value;
var move=document.getElementById(i).clientHeight;
if(document.getElementById(value).style.visibility=='visible')
{
document.getElementById(value).style.visibility='hidden';
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop-move;
}
}
else
{
document.getElementById(value).style.visibility='visible';
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop+move;
}
}
}
</script>
</head>
<body bgColor=Black Text=yellow >
<table cellspacing=0 cellpadding=0 border=0 id=1t style='position:absolute;left:0px;top:5px;width:150px'>
<tr>
<td colspan=2 onClick="expand(1);" bgColor='#555555'>
<B>
Test1
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=1>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=2t style='position:absolute;left:0px;top:24px;width:150px'>
<tr>
<td colspan=2 onClick="expand(2);" bgColor='#555555'>
<B>
Test2
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=2>
<tr>
<td>
Test2
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=3t style='position:absolute;left:0px;top:43px;width:150px'>
<tr>
<td colspan=2 onClick="expand(3);" bgColor='#555555'>
<B>
Test3
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=3>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<script language='javascript1.2'>
//Scrit Name:Collapsable Menu V2.0
//Created By:Garadon
//E-Mail:Shashalak@hotmail.com
//Homepage:www.the-hive.dk/~donp/
function expand(value)
{
var antal=3;
var i=value;
var move=document.getElementById(i).clientHeight;
if(document.getElementById(value).style.visibility=='visible')
{
document.getElementById(value).style.visibility='hidden';
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop-move;
}
}
else
{
document.getElementById(value).style.visibility='visible';
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop+move;
}
}
}
</script>
</head>
<body bgColor=Black Text=yellow >
<table cellspacing=0 cellpadding=0 border=0 id=1t style='position:absolute;left:0px;top:5px;width:150px'>
<tr>
<td colspan=2 onClick="expand(1);" bgColor='#555555'>
<B>
Test1
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=1>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=2t style='position:absolute;left:0px;top:24px;width:150px'>
<tr>
<td colspan=2 onClick="expand(2);" bgColor='#555555'>
<B>
Test2
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=2>
<tr>
<td>
Test2
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=3t style='position:absolute;left:0px;top:43px;width:150px'>
<tr>
<td colspan=2 onClick="expand(3);" bgColor='#555555'>
<B>
Test3
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=3>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>