Okay, I finished. I made it exactly to your specifications, except I need to know one thing -- if div2 is open, can you open div1? (Notice -- I'm not saying if you can open div2 when div1 is open!)
Right now, you can open both by opening div2 first. I can fix that if you'd like, but here's the testing page right now:
Code:
<html>
<body>
<script type="text/javascript">
divstate1 = "none";
divstate2 = "none";
divid1 = "div1";
divid2 = "div2";
function perform(ref,which) {
ie=(document.all);
lay=(document.layers);
dom=(document.getElementById&&!document.all);
divstate=(which>0)?divstate2:divstate1;
if(ie) document.all[ref].style.display = divstate;
if(lay) document.layers[ref].display = divstate;
if(dom) document.getElementById(ref).style.display=divstate;
}
function showhide(reference) {
if(reference==divid1) {
divstate1 = divstate1=="block"?"none":"block";
perform(divid1,0);
} else {
divstate2 = divstate1=="block"||divstate2=="block"?"none":"block";
perform(divid2,1);
}
}
</script>
<div id="div1" style="display:none;height:200px;width:200px;background-color:red;">ZOOP</div>
<div id="div2" style="display:none;height:200px;width:200px;background-color:blue;">ZOOP2</div>
<a href="javascript:showhide('div1')">div1</a> | <a href="javascript:showhide('div2')">div2</a>
</body>
</html>
And here is just the script:
Code:
<script type="text/javascript">
divstate1 = "none";
divstate2 = "none";
divid1 = "div1";
divid2 = "div2";
function perform(ref,which) {
ie=(document.all);
lay=(document.layers);
dom=(document.getElementById&&!document.all);
divstate=(which>0)?divstate2:divstate1;
if(ie) document.all[ref].style.display = divstate;
if(lay) document.layers[ref].display = divstate;
if(dom) document.getElementById(ref).style.display=divstate;
}
function showhide(reference) {
if(reference==divid1) {
divstate1 = divstate1=="block"?"none":"block";
perform(divid1,0);
} else {
divstate2 = divstate1=="block"||divstate2=="block"?"none":"block";
perform(divid2,1);
}
}
</script>
divstate1 is equal to the starting state of div1.
divstate2 is equal to the starting state of div2.
divid1 is equal to the ID of div1.
divid2 is equal to the ID of div2.
You call it by simply doing showhide('div1') (where div1 is the ID of the element).
I tested it in IE 6,7 and Firefox 1.5,2. See if that works for you
