expand and collapse

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<table class="table">
  <tbody>
    <tr class="parent" id="2479">
        <td>expand</td>
   
    </tr>
    <tr class="child-2479 ">
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
    </tr>
    
    <tr class="parent" id="2800">
        <td><span class="btn btn-default">expand</span></td>
    
    </tr>
    <tr class="child-2800">
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
</tr>
 
    </tbody>
</table>

JavaScript

$(function() {
    $('tr.parent td ')
        .on("click", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
    $('tr[class^=child-]').hide().children('td');
});