Har lige fedtet med det et par timer eller tre og er kommet frem til nedenstående knap så skønne løsning (som er en testside). Du kan evt. klippe de to funktioner der hedder IDList og IDValueList ud og lægge dem i sin egen js-fil og inkludere dem i siden i stedet - det vil gøre tingene lidt mere overskuelige. Anyway! Here goes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title></title>
<script>
function IDList(idList) {
this.separator = ",";
if(arguments.length > 1) this.separator = arguments[1];
if(idList.length > 0)
this.list = idList.split(this.separator);
else
this.list = new Array();
IDList.prototype.findIDIndex = function(id) {
for(var i = 0; i < this.list.length; i++) {
if(this.list[i] == id)
return i;
}
return -1;
}
IDList.prototype.addID = function(id) {
var idIdx = this.findIDIndex(id);
if(idIdx < 0)
this.list[this.list.length] = id;
}
IDList.prototype.deleteID = function(id) {
var idIdx = this.findIDIndex(id);
if(idIdx > -1)
this.list.splice(idIdx,1);
}
IDList.prototype.toString = function() {
return this.list.join(this.separator);
}
}
function IDValueList(idValueList) {
function IDValue(id, value) {
this.id = id;
this.value = value;
this.separator = "=";
if(arguments.length > 2) this.separator = arguments[2];
IDValue.prototype.toString = function() {
return this.id + this.separator + this.value;
}
}
this.listseparator = ",";
this.idvalueseparator = "=";
if(arguments.length > 1) this.listseparator = arguments[1];
if(arguments.length > 2) this.idvalueseparator = arguments[2];
this.list = new Array();
var tmpLst = idValueList.split(this.listseparator);
for(var i = 0; i < tmpLst.length; i++) {
var tmpIV = tmpLst[i].split(this.idvalueseparator);
var tmpIVstr = (tmpIV[1] ? tmpIV[1] : "");
this.list[this.list.length] = new IDValue(tmpIV[0], tmpIVstr, this.idvalueseparator);
}
IDValueList.prototype.findIDIndex = function(id) {
for(var i = 0; i < this.list.length; i++) {
if(this.list[i].id.indexOf(id) > -1)
return i;
}
return -1;
}
IDValueList.prototype.addValue = function(id, value) {
var idx = this.findIDIndex(id);
if(idx < 0)
this.list[this.list.length] = new IDValue(id, value, this.idvalueseparator);
else
this.list[idx].value = value;
}
IDValueList.prototype.deleteValue = function(id) {
var idx = this.findIDIndex(id);
if(idx > -1)
this.list.splice(idx, 1);
}
IDValueList.prototype.getValue = function(id) {
var idx = this.findIDIndex(id);
if(idx > -1)
return this.list[idx].value;
return null;
}
IDValueList.prototype.getIDValue = function(id) {
var idx = this.findIDIndex(id);
if(idx > -1)
return this.list[idx];
return null;
}
IDValueList.prototype.toString = function() {
var sep = this.listseparator;
if(arguments.length > 0) sep = arguments[0];
return this.list.join(sep);
}
}
imgout=new Image(9,9);
imgin=new Image(9,9);
/////////////////BEGIN USER EDITABLE///////////////////////////////
imgout.src="pic/add2.gif";
imgin.src="pic/remove2.gif";
///////////////END USER EDITABLE///////////////////////////////////
//this switches expand collapse icons
function filter(imagename,objectsrc){
if (document.images){
document.images[imagename].src=eval(objectsrc+".src");
}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) {
var objCH = new IDValueList(document.cookie, ";");
var ids = objCH.getValue("layers");
if(!ids) ids = "";
var objSelIds = new IDList(ids);
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
filter(("img"+id),'imgin');
objSelIds.addID(id);
} else {
filter(("img"+id),'imgout');
document.getElementById(id).style.display = 'none';
objSelIds.deleteID(id);
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
filter(("img"+id),'imgin');
objSelIds.addID(id);
} else {
filter(("img"+id),'imgout');
document.id.display = 'none';
objSelIds.deleteID(id);
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
objSelIds.addID(id);
} else {
filter(("img"+id),'imgout');
document.all.id.style.display = 'none';
objSelIds.deleteID(id);
}
}
}
var dt = new Date();
dt = new Date(dt.getTime() + 3600000);
objCH.addValue("layers", objSelIds.toString() + "; expires=" + dt);
document.cookie = objCH.getIDValue("layers");
}
window.onload = function() {
var objCH = new IDValueList(document.cookie, ";");
var ids = objCH.getValue("layers");
if(!ids) ids = "";
var lstIds = ids.split(",");
for(var i = 0; i < lstIds.length; i++) {
if(lstIds[i] != "") {
var elm = document.getElementById(lstIds[i]);
if(elm) elm.style.display = "block";
}
}
}
</script>
</head>
<body>
<img src="pic/add2.gif" name="imgfirst" width="9" height="9" border="0">
<a href="java script:void()" onClick="shoh('first');" >Skjul/Vis</a>
<img src="pic/add2.gif" name="imgsecond" width="9" height="9" border="0">
<a href="java script:void()" onClick="shoh('second');" >Skjul/Vis</a>
<img src="pic/add2.gif" name="imgthird" width="9" height="9" border="0">
<a href="java script:void()" onClick="shoh('third');" >Skjul/Vis</a>
<img src="pic/add2.gif" name="imgfourth" width="9" height="9" border="0">
<a href="java script:void()" onClick="shoh('fourth');" >Skjul/Vis</a>
<div style="display: none;" id="first" >1. Nu er jeg vist!</div>
<div style="display: none;" id="second" >2. Nu er jeg vist!</div>
<div style="display: none;" id="third" >3. Nu er jeg vist!</div>
<div style="display: none;" id="fourth" >4. Nu er jeg vist!</div>
</body>
</html>
