Expandable "Detail" Table Rows

　　A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.

　　The only requirements are:

　　Put a class of "parent" on each parent row (tr)

　　Give each parent row (tr) an id

　　Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to

　　Example Code

　　$(function() {

　　$('tr.parent')

　　.css("cursor","pointer")

　　.attr("title","Click to expand/collapse")

　　.click(function(){

　　$(this).siblings('.child-'+this.id).toggle();

　　});

　　$('tr[@class^=child-]').hide().children('td');

　　});Example Table (click a row)