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 | ||
Additional information | ||||
Mind Gym | Mack | Motivation | ||
Additional information | ||||
Outliers | Gladwell | Motivation | ||
Additional information | ||||
Reminiscences of a Stock Operator | Lefevre | Stock Market | ||
Additional information | ||||
Trading Chaos | Williams | Stock Market | ||
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");
});
});