title: Expand/Collapse one at a time
body: <p>How to make it only expand one at a time... So that when one is expanded than the another one is collapses. Any ideas? Here's the fiddle and the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table"&gt;
    &lt;tbody&gt;
      &lt;tr class="parent" id="2479"&gt;
          &lt;td&gt;&lt;span class="btn btn-default"&gt;expand&lt;/span&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="child-2479 "&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;row 1&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="parent" id="2800"&gt;
          &lt;td&gt;&lt;span class="btn btn-default"&gt;expand&lt;/span&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr class="child-2800"&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;row 2&lt;/td&gt;
  &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
      $('tr.parent td span.btn')
          .on("click", function(){
              var idOfParent = $(this).parents('tr').attr('id');
              $('tr.child-'+idOfParent).toggle('slow');
          });
      $('tr[class^=child-]').hide().children('td');
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/abuhamzah/pLvf0pm4/" rel="nofollow">Demo</a></p>