[RESOLVED] show one row & hide others
hi guys,
I got this example code which show rows when click on it, the problem is it shows all but I want if I click on one row it shows that one and hide others. Please help its urgent.
-
<head>
<title>Jquery Table Display</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.tabledisplay-0.2.js"></script>
<style type="text/css">
.showed { display:none; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".shower").click(function() {
$(".showed").showRow();
});
});
</script>
</head>
<body>
<table width="530" bordercolor="#000000" border="1">
<tbody>
<tr class="shower">
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
</tr>
<tr class="showed">
<td>Hello!</td>
<td>Hello!</td>
<td>Hello!</td>
</tr>
<tr class="shower">
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
</tr>
<tr class="showed">
<td>Bye!</td>
<td>Bye!</td>
<td>Bye!</td>
</tr>
<tr class="shower">
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
<td>CLICK SHOW</td>
</tr>
<tr class="showed">
<td>Hello Again!</td>
<td>Hello Again!</td>
<td>Hello Again!</td>
</tr>
</tbody>
</table>
</body>
</html>