I have an html table with expandable/collapsible rows, made in jquery and javascript:

http://jsfiddle.net/jrick/3BTH9/

Rows are sorted by default, on collapsed state, taking into account their value in the "Length" column, so, the first row is (6ft 0.5"), because that is the one with the higher lenght value.

What I want is that, simultaneously while clicking to expand the hidden rows, these become resorted, but now taking into account the row values for the column "Diameter", (numerically in ascending or descending order, or alphabetically, or whatever...).

I have seen some examples of resorting tables, but all of them work with some client command, like clicking on buttons or on table headers. I just want it to actionate automatically while expanding some hidden row. żAny tip or clue?