<HTML>
<HEAD>
<TITLE>Tree menu</TITLE>
<script type="text/javascript">
function toggle(id){
listEl = document.getElementById("list" + id)
imgEl = document.getElementById("img" + id)
if (listEl.className == 'hide'){
listEl.className = "show"
imgEl.src = "arrow_down.gif"
}
else{
listEl.className = "hide"
imgEl.src = "arrow_right.gif"
}
}
</script>
<style type="text/css">
.show {display: block}
.hide {display: none}
LI {
width:100px;
color:#00AA00;
list-style-type: none;
cursor:hand;
cursor:pointer;
}
LI img {vertical-align: middle}
</style>
</HEAD>
<BODY>
<h1>Tree menu</h1>
<UL class="show">
<li id="list1"><img id="img1_1" alt="" src="arrow_right.gif" border=0><a onclick="toggle('1_1')">List 1</a>
<UL id="list1_1" class="hide">
<li><img id="img1_2" alt="" src="arrow_right.gif" border=0><a onclick="toggle('1_2')">1-1-a</a>
<UL id="list1_2" class="hide">
<li><a onclick="toggle('1_3')"><img id="img1_3" alt="" src="arrow_right.gif" border=0>1-2-a</a>
<UL id="list1_3" class="hide">
<li>1-3-a
<li>1-3-b
<li>1-3-c
</UL>
<li><img src="spacer.gif" width="19" height="19" alt="">1-2-b
<li><img src="spacer.gif" width="19" height="19" alt="">1-2-c
</UL>
<li><img src="spacer.gif" width="19" height="19" alt="">1-2-b
<li><img src="spacer.gif" width="19" height="19" alt="">1-2-c
</UL>
<li id="list2"><a onclick="toggle('2_1')"><img id="img2_1" alt="" src="arrow_right.gif" border=0>List 2</a>
<UL id="list2_1" class="hide">
<li>2-1-a
<li>2-1-b
<li>2-1-c
</UL>
<li id="list3"><a onclick="toggle('3_1')"><img id="img3_1" alt="" src="arrow_right.gif" border=0>List 3</a>
<UL id="list3_1" class="hide">
<li>3-1-a
<li>3-1-b
<li>3-1-c
</UL>
</UL>
</BODY>
</HTML>
List 1
1-3-a