[jQuery] Load details content in new table row from within a table (Master/Detail)

[JT]

Hello,
I'm new to jQuery (and javascripting) and was wondering how I go about
showing the details of a record which is displayed in a table on a new
row.  Just a basic expand/collapse toggler that pulls data from
another page and inserts it into a <tr> below.  Here's the code I
have.

<h2>Before
</h2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <th>ID</th>
    <th>First Name</th>
    <th>Last name</th>
    <th>Favorite Color</th>
    <th>Show Details</th>
  </tr>
  <tr>
    <td>1</td>
    <td><p>Joe</p></td>
    <td>Smith</td>
    <td>Red</td>
    <td><a href="#">Show Details</a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sally</td>
    <td>Jones</td>
    <td>Yellow</td>
    <td><a href="#">Show Details</a></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bill</td>
    <td>Ding</td>
    <td>Green</td>
    <td><a href="#">Show Details</a></td>
  </tr>
</table>
<h2>After
</h2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <th>ID</th>
    <th>First Name</th>
    <th>Last name</th>
    <th>Favorite Color</th>
    <th>Show Details</th>
  </tr>
  <tr>
    <td>1</td>
    <td><p>Joe</p></td>
    <td>Smith</td>
    <td>Red</td>
    <td><a href="#">Show Details</a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sally</td>
    <td>Jones</td>
    <td>Yellow</td>
    <td><a href="#">Hide Details</a></td>
  </tr>
  <tr>
    <td colspan="5">Sally has been trying to learn how to make a new
&lt;tr&gt; show below her record when you click on Show Details. This
new row will show more details about her which is pulled from a
separate page using ajax/ahah.</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bill</td>
    <td>Ding</td>
    <td>Green</td>
    <td><a href="#">Show Details</a></td>
  </tr>
</table>

I've ad a little luck with .after, but i couldn't figure out how to
collapse the row back...or pull from a separate file.  Please
help :)
Thank you!