Collapsible Table Rows

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table id="myTable">
  <col style="width: 200px;" />
  <col style="width: 200px;" />

  <tbody>
    <tr><td>Row 1</td><td><span class="toggle"></span></td></tr>
    <tr class='expander'>
        <td>
           <table>
            <tr>
               <td>Row 1a</td>
               <td>Row 2a</td>
               <td>Row 1a</td>   
               <td><span class="toggle"></span></td>               
            </tr>            
            <tr class='expander'>
              <td>sdafsafd</td>
            </tr>
            </table>
         </td>
    <td></td></tr>
  </tbody>

  <tbody>
    <tr><td>Row 2</td><td><span class="toggle"></span></td></tr>
    <tr class='expander'><td>Row 2a</td><td></td></tr>
    <tr class='expander'><td>Row 2b</td><td></td></tr>
  </tbody>

  <tbody>
    <tr><td>Row 3</td><td><span class="toggle"></span></td></tr>
    <tr class='expander'><td>Row 3a</td><td></td></tr>
    <tr class='expander'><td>Row 3b</td><td></td></tr>
    <tr class='expander'><td>Row 3c</td><td></td></tr>
    <tr class='expander'><td>Row 3d</td><td></td></tr>
</tbody>


</table>

CSS

.expander { display: none; }
.expander td:first-child { text-indent: 10px }

span { cursor: pointer; color: #adadad; font-family: FontAwesome; }
span:hover { color: #777777; }
span.toggle:after { content: '\f055'; }

JavaScript

$(document).ready(function() {
  $('#myTable').on('click', '.toggle', function() {
    $(this).parents('tr').nextAll('tr.expander').toggle();
  });
});