Prøv evt. at lege lidt med dette:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
.statusheadline{width:250px;cursor:pointer;background-color:#ccc;border:1px solid #ccc;font-size:14px:font-weight:bold}
.statustext{display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
var StatusWait=false;
function StatusBox(o){
if(StatusWait)return;
StatusWait=true;
if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);
else hideStatusBox(o);
}
function appearStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=0;
if(iHeight<120){
elm.style.display="block";
elm.style.height=iHeight+"px";
if(iHeight<70)iHeight+=3;
else if(iHeight<100)iHeight+=2;
else iHeight++;
window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",10)
}else{
elm.style.overflow="auto";
StatusWait=false
}
}
function hideStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=elm.offsetHeight;
if(iHeight>1){
elm.style.overflow="hidden";
elm.style.height=iHeight+"px";
if(iHeight>50)iHeight-=3;
else if(iHeight>30)iHeight-=2;
else iHeight--;
window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",10)
}else{
elm.style.display="none";
StatusWait=false
}
}
</script>
<div class="statusheadline" onclick="StatusBox('info1')">Overskrift</div>
<div id="info1" class="statustext">
Andet tekst her!<br>
Og her!
</div>
<div class="statusheadline" onclick="StatusBox('info2')">Overskrift</div>
<div id="info2" class="statustext">
Andet tekst her!<br>
Og her!
</div>
</body>
</html>
