AcommonUIistohaveatableofdatarows,whichwhenclickedonexpandtoshowadetailedbreakdownof"child"rowsbelowthe"parent"row.

Theonlyrequirementsare:

Putaclassof"parent"oneachparentrow(tr)

Giveeachparentrow(tr)anid

Giveeachchildrowaclassof"child-ID"whereIDistheidoftheparenttrthatitbelongsto

ExampleCode

$(function(){

$('tr.parent')

.css("cursor","pointer")

.attr("title","Clicktoexpand/collapse")

.click(function(){

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

});

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

});ExampleTable(clickarow)

ID Name Total

123	Bill Gates		100
	2007-01-02	A short description	15
	2007-02-03	Another description	45
	2007-03-04	More Stuff	40
456	Bill Brasky		50
	2007-01-02	A short description	10
	2007-02-03	Another description	20
	2007-03-04	More Stuff	20
789	Phil Upspace		75
	2007-01-02	A short description	33
	2007-02-03	Another description	22
	2007-03-04	More Stuff	20