Summary/Detail relationships can be difficult to display in HTML. The
amount of data can often be overwhelming. This is a client side
(JavaScript + CSS) way to hide or display selective detail rows. It follows
the principle of unobtrusive Javascript and it pretty easy to use.

To use this feature you have to

  • Give your table an id and add exptable to its classes.
  • Use thead and tbody to separate headers from content
  • Declare one column in the header row to be of class expcontrol
  • Grab the javascript, css, and two images and include them in your page

Here is a little table to fool around with to get an idea of how it works.
The onclick handlers in the header control column and on the summary
rows are all added dynamically, as are the image backgrounds for the
control cells, and the titles.

+ Title Author Count Date
Charlotte's Web E. B. White 36 2005-11-05
- Some Pig Charlotte 1 Sunday
- Radiant Templeton 2 Monday
- Humble Uncle 3 Monday
Red Sails To Capri Ann Weil 24 2005-04-25
- Chapter 1 Bob 3 Monday
- Chapter 2 Bill 4 Tuesday
Island of the Blue Dolphin Scott O’Dell 12 2005-06-12
- Return to the Island Ulana 1 Friday

Comments welcome. It still has a few imperfections, one place where the
control column is hardcoded to be column 0. I may fix that later on.