title: Using jQuery show/hide toggle in a table
body: <p>I'm trying to adapt Andy Langton's show/hide/mini-accordion (<a href="http://andylangton.co.uk/jquery-show-hide" rel="nofollow noreferrer">http://andylangton.co.uk/jquery-show-hide</a>) 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.</p>
  
  <p>Andy's code uses</p>
  
  <pre><code>$('.toggle')
      .prev()
      .append('&lt;a href="#" class="toggleLink"&gt;'+showText+'&lt;/a&gt;');
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>$('.toggle')
      .prev()
      .append('&lt;td&gt;&lt;a href="#" class="toggleLink"&gt;'+showText+'&lt;/a&gt;&lt;/td&gt;');
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>$(this)
      .parent()
      .next('.toggle')
      .toggle('slow');
  </code></pre>
  
  <p>This is essentially how the source looks...</p>
  
  <pre><code>&lt;table id="training-events"&gt;
  &lt;tr&gt;
     &lt;th&gt;Date / Time&lt;/th&gt;
     &lt;th&gt;Event / Venue&lt;/th&gt;
     &lt;th&gt;Cost&lt;/th&gt;
     &lt;th&gt;Confirm&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr class="event" valign="top"&gt;
      &lt;td class="date"&gt;Mon, 10 August 2009&lt;br&gt;03:30 PM - 05:30 PM&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Regional Director Meeting&lt;/td&gt;
      &lt;td&gt;No Charge&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="toggleLink"&gt;Cancel&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="display: none;" class="toggle"&gt;
     &lt;td colspan="4"&gt;
        ** FORM **
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>