title: Toggle table row with jQuery
body: <p>I have a table where I click on a parent row which shows/hides child row with certain CSS class.
  The thing is that .toggle() is triggered with a click on a parent row and I would like to be triggered only by clicking on span with a class btn which is inside parent row.</p>
  
  <p>This is HTML:</p>
  
  <pre><code>&lt;table cellpadding="5" cellspacing="3" border="1"&gt;
    &lt;tbody&gt;
      &lt;tr class="parent" id="2479"&gt;
        &lt;td&gt;&lt;span class="btn"&gt;text&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-2479"&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This jQuery:</p>
  
  <pre><code>$(function() {
      $('tr.parent')
          .click(function(){
              $(this).siblings('.child-'+this.id).toggle('slow');
          });
      $('tr[class^=child-]').hide().children('td');
  });
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/esedic/Hjhb8/" rel="nofollow noreferrer">jsfiddle link</a></p>