En grov udgave kunne se således ud:
demoside.htm:
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Demo af vis/skjul kasse</title>
<style type="text/css">
.expandable { font-size: x-small; font-family: verdana, sans-serif; width:100px;}
.expandable h1 { font-size: x-small; font-family: verdana, sans-serif; margin:0; }
.expandable a { text-decoration:none; display:inline; }
.expands { display:none; }
</style>
<script type="text/javascript" src="expandablebox.js"></script>
<script type="text/javascript">
window.onload = function() {
setupExpandables();
}
</script>
</head>
<body>
<div class="expandable">
<a href="#">Overskrift 1</a>
<div class="expands">
denne ramme, som er nummer 1, skal vise sig<br>
når linket bliver klikket...</div>
</div>
<div class="expandable">
<h1><a href="#">Overskrift 2</a></h1>
<div class="expands">
denne ramme, som er nummer 2, skal vise sig<br>
når linket bliver klikket...</div>
</div>
<div class="expandable">
<h1><a href="#">Overskrift 3</a></h1>
<div class="expands">
denne ramme, som er nummer 3, skal vise sig<br>
når linket bliver klikket...</div>
</div>
</body>
</html>
expandablebox.js
------------------------
function setupExpandables() {
var divs = document.getElementsByTagName("div");
if(divs && divs.length > 0) {
for(var i=0; i < divs.length; i++) {
if(divs[i].getAttribute("class") == "expandable" || divs[i].getAttribute("className") == "expandable") {
var lnk = divs[i].getElementsByTagName("a");
if(lnk[0]) {
lnk[0].onclick = function() { toggleExpandable(this); return false; }
}
}
}
}
}
function toggleExpandable(e) {
if(e) {
var pn = e;
for(; pn && pn.getAttribute("class") != "expandable" && pn.getAttribute("className") != "expandable"; pn=pn.parentNode);
if(pn) {
var pdivs = pn.getElementsByTagName("div");
if(pdivs.length > 0) {
for(var i = 0; i < pdivs.length; i++) {
var xpn = pdivs[i];
if(xpn.getAttribute("class") == "expands" || xpn.getAttribute("className") == "expands") {
xpn.style.display = (xpn.style.display == 'none' || xpn.style.display == '' ? 'block' : 'none');
e.blur();
}
}
}
}
else
alert('Indeholdende div kunne ikke findes');
}
}
Ny bruger
Nybegynder
Opret
Preview
