Jquery CollapsibleTabel driller mig en smule
Jeg har brugt et lille javascript som laver en collapsible tabel. Dette virker i og for sig også efter hensigten så længe der kun befinder sig én række i tbody (Parent1 - Child1). Så snart der befinder sig flere rækker i tbody (Parent2 - Child2) kan jeg stadig lukke (collapse) rækkerne - men ikke åbne dem igen... - hvad kan jeg have overset...? ~:]<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle").click(function(){
var id = $(this).attr('id');
$("#tog"+ id).slideToggle("slow");
if ($('#'+ id + ' img.close').is(":hidden")){
$('#'+ id +' img.close').show();
$('#'+ id +' img.open').hide();
} else {
$('#'+ id + ' img.open').show();
$('#'+ id + ' img.close').hide();
}
});
});
</script>
</head>
<body>
<table id="tb-1" cellspacing="1" width="758px">
<thead>
<tr>
<th> </th>
<th>HeaderText1</th>
<th>HeaderText2</th>
<th>HeaderText3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="java script:void(null);" class="toggle" id="gle01">
<img src="images/icons/toggle-plus.jpg" class="close" style="display:none;" alt=""/>
<img src="images/icons/toggle-min.jpg" class="open" alt=""/>
</a>
</td>
<td>Parent1</td>
<td>Parent1</td>
<td>Parent1</td>
</tr>
</tbody>
<tbody id='toggle01'>
<tr>
<td> </td>
<td>Child1</td>
<td>Child1</td>
<td>Child1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<a href="java script:void(null);" class="toggle" id="gle02">
<img src="images/icons/toggle-plus.jpg" class="close" style="display:none;" alt=""/>
<img src="images/icons/toggle-min.jpg" class="open" alt=""/>
</a>
</td>
<td>Parent2</td>
<td>Parent2</td>
<td>Parent2</td>
</tr>
</tbody>
<tbody id='toggle02'>
<tr>
<td> </td>
<td>Child2</td>
<td>Child2</td>
<td>Child2</td>
</tr>
<tr>
<td> </td>
<td>Child2</td>
<td>Child2</td>
<td>Child2</td>
</tr>
</tbody>
</table>
</body>
