The CSS style:
Quote:
<style type="text/css" media="screen">
#Image1 { cursor: hand; }
</style>
|
The script:
Quote:
<script type="text/javascript">
function toggleDisplay(elementID){
var element;
element = document.getElementById(elementID).style;
element.display == 'none' ? element.display = 'block' : element.display='none';
}
</script>
|
The HTML:
Quote:
<div>
<span>Click the image</span>
<img id="Image1" onclick="toggleDisplay('Table1');" src="images/yourImage.gif" />
</div>
<br />
<table id="Table1" cellpadding="0" cellspacing="0" style="border: solid 1px #000000; display: none;">
<tbody>
<tr>
<td>This is a test</td>
</tr>
<tr>
<td style="height: 200px;"> </td>
</tr>
</tbody>
</table>
|
Plese note:
- you have to set the attribute "display: none" inline; do not set that attribute in a css class because IE7
has a problem with that. The problem is that when you click the image nothing happens
That's why you have to set it inline.
- The rest of the styles you want to apply to the table, you can define them in a css class.
hth.
