Using jQuery show/hide toggle in a table

Question

Hi all,

I'm trying to adapt Andy Langton's show/hide/mini-accordion (http://andylangton.co.uk/jquery-show-hide) to work within a table. I'm wanting to create a list of events with a confirmation form attached to each event. Upon clicking on the 'confirm' button in the last cell or the row, I would like the form associated with this particular event to be revealed.

Andy's code uses

$('.toggle')
    .prev()
    .append('<a href="#" class="toggleLink">'+showText+'</a>');

to dynamically add the toggle link (the confirm button) just before the hidden form. This, however, adds the link within the table row and not in a cell. I have therefore changed it to

$('.toggle')
    .prev()
    .append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');

The link is now in the correct place but does now not invoke the show/hide of the form. When it was placed incorrectly the functionality worked, despite not being quite right. I feel that the selector calling the toggle action is not correct but I don't know how to correct it. It is currently

$(this)
    .parent()
    .next('.toggle')
    .toggle('slow');

This is essentially how the source looks...

<table id="training-events">
<tr>
   <th>Date / Time</th>
   <th>Event / Venue</th>
   <th>Cost</th>
   <th>Confirm</th>
</tr>
<tr class="event" valign="top">
    <td class="date">Mon, 10 August 2009<br>03:30 PM - 05:30 PM</td>
    <td><h5>Regional Director Meeting</td>
    <td>No Charge</td>
    <td><a href="#" class="toggleLink">Cancel</a></td>
</tr>
<tr style="display: none;" class="toggle">
   <td colspan="4">
      ** FORM **
   </td>
</tr>
</table>

Answer 1

This works for me if I remove the style="display:none;" from the toggle TR.

You'll notice in the example he's also doing:

 $('.toggle').hide();

This is what is hiding the toggle classed elements.

Answer 2

You need something like:

$(this).parent().parent().next('.toggle').toggle('slow')

or

$(this).closest('tr').next('.toggle').toggle('slow');

You're only making a single parent() call which brings you to the TD, you need to step up to the TR.