PDA

View Full Version : Easy one for you I hope!



rawky76
12-01-2005, 12:27 AM
Expanding menu, works but all are open when page loads, want them to be closed, please help!!!

<script>
function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
} else {
e.style.display = "none";
}
}
</script>

<li><div style="cursor: hand" onclick="toggle(HideShowIn);">Menu1</div></li>
<span id="HideShowIn"><ul>
<li>Item1</li>
<li>Item2</li>
</ul></span>

Dont need to worry about cross browser, for a private Intranet, all clients are IE6

jscheuer1
12-01-2005, 07:22 AM
IE only:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

var hiddenContent=new Array();
//configure all id's for initial hiding below
//use as many as you need:
hiddenContent[0]='HideShowIn'
hiddenContent[1]='anotherHidden'

//////////////Stop Editing////////////////

document.write('<style id="tmpStyle" type="text/css">')
for (var i_tem = 1; i_tem < hiddenContent.length; i_tem++)
document.write('#'+hiddenContent[i_tem]+', ')
document.write('#'+hiddenContent[0]+' {\
display:none;\
}\
<\/style>')

onload=function(){
for (var i_tem = 0; i_tem < hiddenContent.length; i_tem++)
document.all[hiddenContent[i_tem]].style.display='none'
tmpStyle.disabled="true"
}

function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
} else {
e.style.display = "none";
}
}
</script>
</head>
<body>
<li><div style="cursor: hand" onclick="toggle(HideShowIn);">Menu1</div></li>
<span id="HideShowIn"><ul>
<li>Item1</li>
<li>Item2</li>
</ul></span>
<li><div style="cursor: hand" onclick="toggle(anotherHidden);">Menu2</div></li>
<span id="anotherHidden"><ul>
<li>Item1</li>
<li>Item2</li>
</ul></span>
</body>
</html>