Research & Development
Table Expand Rows

A simple way to expand table rows, using just a few lines of jQuery and css .

Just create a hidden "details" row beneath every collapsed row mdash; Super-simple when pulling from a database and formatting in your view. Then use javascript to toggle the details row.

You can do anything you want in the "expanded row: extra detail, forms, images, etc. Here's a basic sample, html, js, and css below:

Title Author Subject
Solomon Secret Fleet Finance
Solomon Secret

Additional information

Mind Gym Mack Motivation
Mind Gym

Additional information

Outliers Gladwell Motivation
How I Made $2 Million

Additional information


Reminiscences of a Stock Operator Lefevre Stock Market
Reminiscences of a Stock Operator

Additional information

Trading Chaos Williams Stock Market
Trading Chaos

Additional information

The CSS

table.oe-expand th { background:#7CB8E2 url(/assets/pix/tbl/dk-blu-grad.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
table.oe-expand td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
table.oe-expand tr.odd td { background:#fff url(/assets/pix/tbl/lt-blu-grad.png) repeat-x scroll center left; cursor:pointer; }
table.oe-expand td .arrow { background:transparent url(/assets/pix/tbl/up-down-arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
table.oe-expand td .arrow.up { background-position:0px 0px;}

The jQuery

$(function() {
	$("table.oe-expand tr:odd").addClass("odd");
	$("table.oe-expand tr:not(.odd)").hide();
	$("table.oe-expand tr:first-child").show();

	$("table.oe-expand tr.odd").click(function(){
		$(this).next("tr").toggle();
		$(this).find(".arrow").toggleClass("up");
		});
	});