Forum Moderators: open
<html>
<head>
<title>Report</title>
<style type="text/css">
.button{
border:1px solid #000;
background:#F00;
color:#FFF;
font-weight:bold;
}
td {
border:1px dashed graytext;
}
body {
font-family:arial;
}
</style>
<script type="text/javascript">
function setTable(what){
if(document.getElementById(what).style.display=="none")
{
document.getElementById(what).style.display="block";
}
else if(document.getElementById(what).style.display=="block")
{
document.getElementById(what).style.display="none";
}
}
</script>
</head>
<body>
<div align="center">
<span style="font-size:2em;font-weight:bold;"> Report</span>
</div>
<hr/>
<div align="left">
<h3 align="left"><a href="javascript:void(0)" onclick="setTable('unknownTable')"><img width="16" height="16" alt="[+]" align="top" src="open.gif"/></a> Unknown Files</h3>
<table id="unknownTable" style="display:none;" cellpadding="1" cellspacing="0" class="sortable">
<tbody>
<tr style="background-color:#d9e6ef;">
<th class="unsortable">File</th>
<th>Date Last Accessed</th>
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
</html>
Inside of your setTable() function, when you check the if...else condition, you can simply add more lines that reference different elements:
if(document.getElementById(what).style.display=="none")
{
document.getElementById(what).style.display="block";
document.getElementById(what+'_img_1').style.display="none";
document.getElementById(what+'_img_2').style.display="block";
}
else if(document.getElementById(what).style.display=="block")
{
document.getElementById(what).style.display="none";
document.getElementById(what+'_img_1').style.display="block";
document.getElementById(what+'_img_2').style.display="none";
}
Then just define an ID on each <img> tag that uses the same string that you are passing to the function with "_img_1" or "_img_2" appended to it:
<img src="..." id="unknownTable_img_1" />
