Så er det måske sådan noget, du skal bruge:
-- jeg har sat den til at folde sammen, så de, som har scripting fra også ser noget, der skal ikke ændres meget, hvis du vil have det sammenfoldet fra start ...
Til gengæld kræver det lige lidt mere, hvis du fortsat ønsker at udskifte !-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Expanding/contracting menu</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/485556"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;cursor:pointer;color:#9d52be;background:#fff;font-weight:800;font-style:italics;font-size:10px;width:250px;}
.menu{position:relative;overflow:hidden;padding-left:5px;}
.menu a{text-decoration:none;}
.menu a:link{color:black;}
.menu a:visited{color:black;}
.menu a:hover{color:red}
.menu a:active{color:red}
</style>
<script language="javascript" type="text/javascript">
var speed = 50;//tid imellem ny højde;
var diff = 2;//antal pixels, som højde ændres med;
var state = new Array(),menus = new Array(),initiated=false,actMenus=0;
function showMenu(d){
d = (showMenu.arguments.length==1)?document.getElementById(d.id.substring(1)):false;
//if(initiated&&d&&state[d.id][2]==3)return;
var num = d?state[d.id][0]:null;
var newHeight;
for(i=0;menus.length>i;i++){
var actId = menus[i].id;
switch(state[actId][2]){
case 0:
if(num===state[actId][0]){
document.getElementById("o"+actId+'pic').src = "../img/minus.gif"
state[actId][2] = 1;
actMenus++;
newHeight = state[actId][3] + diff;
if(newHeight>=state[actId][1]){
state[actId][3] = state[actId][1];
state[actId][2] = 3;
actMenus--;
}else
state[actId][3] = newHeight;
}
break;
case 1:
newHeight = state[actId][3] + diff;
if(newHeight>=state[actId][1]){
state[actId][3] = state[actId][1];
state[actId][2] = 3;
actMenus--;
}else
state[actId][3] = newHeight;
break;
case 2:
newHeight = state[actId][3] - diff;
if(0>=newHeight){
state[actId][3] = 0;
state[actId][2] = 0;
actMenus--;
}else
state[actId][3] = newHeight;
break;
case 3:
//if(num!=state[actId][0]){
document.getElementById("o"+actId+'pic').src = "../img/plus.gif"
state[actId][2] = 2;
actMenus++;
newHeight = state[actId][3] - diff;
if(0>=newHeight){
state[actId][3] = 0;
state[actId][2] = 0;
actMenus--;
}else
state[actId][3] = newHeight;
//}
}
//alert(menus[i].id+"\n"+state[actId][3]);
menus[i].style.height = state[actId][3] + 'px';
}
//alert(actMenus);
initiated = true;
if(actMenus>0)setTimeout('showMenu()',speed);
}
function init(){
var divs = document.getElementsByTagName('DIV');
for(i=0;divs.length>i;i++){
if(divs[i].id.match(/^menu/)){
id = divs[i].id;
menus[menus.length] = divs[i];
state[id] = new Array();
state[id][0] = menus.length-1;
state[id][1] = divs[i].offsetHeight;
state[id][2] = 3;
state[id][3] = state[id][1];
//alert(state[id][3]);
}
}
showMenu();
}
</script>
</head>
<body onload="init();">
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 1
<div id="menu1" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
<img id="omenu2pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 2
<div id="menu2" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
<img id="omenu3pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 3
<div id="menu3" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">
<img id="omenu4pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 4
<div id="menu4" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
<img id="omenu5pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 5
<div id="menu5" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
</body>
</html>
