...

View Full Version : Expand + Collapse Menu



Wasda
12-05-2004, 05:01 PM
I found this script on one of the tutorial link, i've modified it to work like i wanted, but I can't figured out one thing.. I want the all the menu list to automatic expand on page load, because right now when you enter a page, you have to click and expand it yourself, please help me.


<ul id="collapsibleList">
<li>
Menu 1
<script type="text/javascript">document.writeln('<img id="menu1Image" src="./images/plus.gif" alt="Expand" onClick="toggle(\'menu1Image\',\'menu1List\');">');</script>
</li>
<ul id="menu1List">
<TABLE border=1 width="300">
<TR><TD>
<A href="link1">link 1</A><BR>
<A href="link2">link 2</A><BR>
<A href="link3">link 3</A><BR>
</TD></TR></TBODY></TABLE>
</ul>
<li>
Menu 2
<script type="text/javascript">document.writeln('<img id="menu2Image" src="./images/plus.gif" alt="Expand" onClick="toggle(\'menu2Image\',\'menu2List\');">');</script>
</li>
<ul id="menu2List">
<TABLE border=1 width="300">
<TR><TD>
<A href="link1">links 1</A><BR>
<A href="link2">links 2</A><BR>
<A href="link3">links 3</A><BR>
</TD></TR></TBODY></TABLE>
</ul></ul>
<script type="text/javascript">
document.getElementById('collapsibleList').style.listStyle="none"; // remove list markers
document.getElementById('menu1List').style.display="none"; // collapse list
document.getElementById('menu2List').style.display="none"; // collapse list
// this function toggles the status of a list
function toggle(image,list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
document.getElementById(image).src="./images/minus.gif";
document.getElementById(image).alt="Collapse";
}else{
listElementStyle.display="none";
document.getElementById(image).src="./images/plus.gif";
document.getElementById(image).alt="Collapse";
}
}
</script>

Willy Duitt
12-05-2004, 05:28 PM
Remove these two lines which are changing the style display when the page loads (adjust your expand/collapse images accordingly)....

document.getElementById('menu1List').style.display="none"; // collapse list
document.getElementById('menu2List').style.display="none"; // collapse list

Also, your alt text is incorrect in your else conditional..
It should be: document.getElementById(image).alt="Expand";


.....Willy

Edit: Fixed alt text observation....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum