Sliding options menu in tables

Question

I'm having a hard time thinking how to word this one, so if it makes no sense, let me know.

I have a table that looks something like this

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
Jane Doe | [email protected] | 555-5555

Now lets say that every listed name is a link. When you click that link, an area appears between the row you're on and the row below it. This new area pushes everything below it down. This new area can't be confined to the structure of the table's columns, can have a greater length than a regular row, but should be confined to the width of the table.

Something like this:

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
^
This is an area that was once hidden
but now is shown.
Jane Doe | [email protected] | 555-5555

(The carrot is just my version of displaying an imaginary box for the area)

What I have so for is my table, with rows all filled and a link to a js function I've created. This function accepts an id and call jquery's slideToggle function. For every row I create, I'm also creating a second row where I set the display = none. Obviously this isn't working because that table row is now restricted to the column widths of all other rows (actually it just expands the first row).

Any suggestions on how to do this?

Answer 1

If your table is a fixed number of cells wide, you can add a row with a single cell that spans them all using the colspan attribute of the cell:

<tr>
 <td colspan="3">
  <!-- content -->
 </td>
</tr>