title: Expand only one table row using jQuery
body: <p>I'm using jQuery to expand a row in a table when the row is clicked. How do I modify the code so that when another row is clicked, the currently open row collapses?</p>
  
  <p>Here is the table:</p>
  
  <pre><code>&lt;table class="tb"&gt;
   &lt;tbody&gt;
    &lt;tr class="parent"&gt;&lt;td&gt;Click here&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Hidden row&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="parent"&gt;&lt;td&gt;Or click here&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Another hidden row&lt;/td&gt;&lt;/tr&gt;
   &lt;/tbody&gt;    
  &lt;/table&gt;
  </code></pre>
  
  <p>And here is the jQuery:</p>
  
  <pre><code>$('table.tb').each(function() {
   var $table = $(this);
   $table.find('.parent').click(function() {
    $(this).nextUntil('.parent').toggle();
   });
   var $childRows = $table.find('tbody tr').not('.parent').hide();
  });
  </code></pre>