title: Show hide table row
body: <p>I need to hide show Table row, but it appears I'm not targeting it properly:</p>
  
  <pre><code>$('.ShowHide').click(function(){
      $(this).next('.hiddenTR').toggle();
  });
  </code></pre>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;img src="img.gif" class="ShowHide"&gt;&lt;/td&gt;
      &lt;td&gt;text 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hiddenTR"&gt;
      &lt;td colspan="2"&gt;hidden text 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;img src="img.gif" class="ShowHide"&gt;&lt;/td&gt;
      &lt;td&gt;text 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hiddenTR"&gt;
      &lt;td colspan="2"&gt;hidden text 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Is it even possible to target like this? I need to show only the TR below and I do not know how many there could be, so using IDs is out of the question. </p>
  
  <p>Need a nudge in the right direction. </p>
  
  <p>Thanks.</p>