Accordian Example
by mhardik
HTML
<table class="dataTable" width="99%">
<tr>
<td class=tableHeading>Parent</td>
<td class=tableHeading>Childs</td>
</tr>
<tr class=dataRow>
<td class=tableCellWBorderGray>
<b>1</b>
<input type="radio"name="attribute" value="Tom" > Tom
</td>
<td class=tableCellWBorderGray>
<div id="child1">
<table width="99%">
<tr>
<td class=tableCellWBorderGray>
<input type="checkbox" name="attributes" value=""> Kathie
</td>
</tr>
<tr>
<td class=tableCellWBorderGray>
<input type="checkbox" name="attributes" value=""> Sara
</td>
</tr>
<tr>
<td class=tableCellWBorderGray>
<input type="checkbox" name="attributes" value="Veronica"> Veronica
</td>
</tr>
...CSS
.dataTable{
width:99%;
}
.tableHeading{
background: none repeat scroll 0 0 #DDDDFF;
color: #000000;
font: bold 8pt Verdana,Arial,sans-serif;
padding-left: 2px;
padding-right: 2px;
}
.tableCellWBorderGray{
background: none repeat scroll 0 0 #F5F5F5;
border-color: #FFFFFF;
border-style: solid;
border-width: 0.1mm;
color: #000000;
font: 8pt Verdana,Arial,sans-serif;
}JavaScript
$(document).ready(function() {
var childs = $('.tableCellWBorderGray > div');
childs.hide();
$("input:radio[name=attribute]").change(function(){
var parent = $(this).parent().next(); // In our case, second td
var kids = parent.children();
childs.slideUp('slow');
kids.slideDown('slow');
});
$('input:radio[name=attribute]:nth(0)').attr('checked',true).trigger('change');
});