1
I have to toggle the arrow image on onclick event. Here is the code with the required functionility. What I want now is, when the page loads there will be right arrow images. The arrow should be chenge to down arrow when I the row expands to dispaly the child links. and if the collaps to hide child link the arrow should change back to right arroe image. In the below e.g code you will not be able to see the arrow images.
Here is the code I have.
CODE:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
//code for toggling-hide/display table
function ShowMenu(num,menu,max,imd)
{
//alert('test toggle');
for(i = 0; i < max; i++)
{
//add number onto end of menu
var menu_div = menu + i;
//var menu_div1 = menu1 + i;
//if current show
if(i == num)
{
document.getElementById(menu_div).style.display = 'inline';
//document.getElementById(menu_div1).style.display = 'block';
}
else
{
//if not, hide
document.getElementById(menu_div).style.display = 'none';
//document.getElementById(menu_div1).style.display = 'none';
}
}
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan=3><img src="/virtuals/vap/CWW/images/spacer.gif" height=15 width=1></td>
</tr>
<tr>
<td width=15><img src="/virtuals/vap/CWW/images/spacer.gif" height=1 width=15></td>
<td "width=100%">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#DDDDDD" width="100%" id="AutoNumber5" bgcolor=#DDDDDD>
<tr>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber6">
<tr>
<td width="100%">
<table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber7" width="100%">
<tr>
<td valign="top" width="1"></td>
<td><b><font size="2" face="Tahoma" color="black">
<span style="font-size: 8pt">FAVORITE LINKS</span></font></b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber8">
<tr>
<td width ="100%">
<table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber10" height="30" >
<tr>
<td width="10%" align ="left" width="" valign="middle"><a style="cursor:hand" onclick="ShowMenu('0','row','3','img0')"><img id='img0' src="/virtuals/vap/CWW/images/grey_arrow_right.jpg" height="13" width="13" alt="right arrow"></a></td>
<td width="100%" valign="top"><font style="font-size: 7pt" face="Tahoma"><b>TOP LINKS</b></font></td>
</tr>
<tr id='row0' style="display:none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">
<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://expense6.bmc.com/eworkplace" class="bodyText"><font style="font-size: 8pt" face="Tahoma">Expense Reports</font></a></td>
</tr>
<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://sharepoint.bmc.com/GlobalTravel/default.aspx" class="bodyText"><font style="font-size: 8pt" face="Tahoma">Travel</font></a></td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td colspan="2" width="100%">
<hr color="#dddddd" size="1" />
</td>
</tr>
<tr>
<td width="10%" align ="left" width="" valign="middle"><a style="cursor:hand" onclick="ShowMenu('1','row','3','img1')"><img id='img1' src="/virtuals/vap/CWW/images/grey_arrow_right.jpg" height="13" width="13"></a></td>
<td width="100%" valign="top"><font style="font-size: 7pt" face="Tahoma"><b>GET IT DONE</b></font></td>
</tr>
<tr id='row1' style="display:none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">
<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTPS://ncai.bmc.com:9440/OA_HTML/US/OCAIPROD_login.htm" class="bodyText"><font style="font-size: 8pt" face="Tahoma">Oracle Login</font></a></td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td colspan="2" width="100%">
<hr color="#dddddd" size="1" />
</td>
</tr>
<tr>
<td width="10%" align ="left" width="" valign="middle"><a style="cursor:hand" onclick="ShowMenu('2','row','3','img2')"><img id='img2' src="/virtuals/vap/CWW/images/grey_arrow_right.jpg" height="13" width="13"></a></td>
<td width="100%" valign="top"><font style="font-size: 7pt" face="Tahoma"><b>CORPORATE</b></font></td>
</tr>
<tr id='row2' style="display:none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">
<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://banana.bmc.com/cgi-bin/calweb/calweb.exe" class="bodyText"><font style="font-size: 8pt" face="Tahoma">Calendar Application</font></a></td>
</tr>
<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://fishtail.bmc.com/csg/staging/brandpack/" class="bodyText"><font style="font-size: 8pt" face="Tahoma">Employee Brand Pack</font></a></td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width=15><img src="/virtuals/vap/CWW/images/spacer.gif" height=1 width=15></td>
</tr>
</table>
</body>
</html>[/HTML]
