Binaryworld - Javascript : Show/Hide table rows, Mouse over effect and more ... [ JScript -> General ]

This snippet will show you how to show/hide elements like Table, Row, Cell, Span, Div ... using a very simple trick

- Create a new test file and name it Test.htm
- Copy/Paste the following code to test.htm
- you will need 2 sample images show.gif and hide.gif in order to test this code. Place both images in the same folder

Click here to test

Click here to copy the following block

<html>
<head>
<script language="JavaScript">
function ToggleItem(itemId)
{
var item = document.getElementById(itemId);

if (item.style.display == 'none')
    item.style.display = 'inline';
else
    item.style.display = 'none';
}
function ToggleButtonImage(imgID, image1Url, image2Url, alt1, alt2)
{
var item = document.getElementById(imgID);

if (item.src.toLowerCase().indexOf(image1Url.toLowerCase())!= -1)
{
    item.src = image2Url;
    item.alt = alt2;
}
else
{
    item.src = image1Url;
    item.alt = alt1;
}
}
</script>
<style>

.HeaderButton
{
border: 1px solid #ece9d8;
background-color: #ece9d8;
cursor: hand;
}
.ThinBorderTable
{
border: 1px solid #bbbbbb;
}
.HeaderButtonHover
{
border: 1px solid #336699;
background-color: #ddeef7;
cursor: hand;
}

</style>
</head>

<body>

<table width="100%" class=ThinBorderTable>
<tr onmouseover="document.getElementById('captionRow').className='HeaderButtonHover';"
    onmouseout="document.getElementById('captionRow').className='HeaderButton';"
    onclick="ToggleItem('row1');ToggleItem('row2');ToggleButtonImage('imgShowHide', 'hide.gif', 'show.gif', 'Hide all rows', 'Show all rows');return false;"
    class="HeaderButton"
  >
    <td id="captionRow">
    <img id="imgShowHide" src="hide.gif" alt="Hide all rows" align="AbsMiddle" />
    Show/Hide </td>
</tr>
<tr id="row1">
    <td>This is row1</td>
</tr>
<tr id="row2">
    <td>This is row2</td>
</tr>
</table>
</body>
</html>