Q:

HTML + jquery expand a table on click and hover actions

I found some code online but having hard time getting it to work.  I want to expand the table by clicking of the collapsed header.  I got it working by changing my table structure by removing <thead> 
and <tbody> tags but I need them.  Here is the table code:

 $('table tr:not(.header)').hide();

 $('.header').click(function() {
   $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
 });
table,
tr,
td,
th {
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}
.header .sign:after {
  content: "\2B9D";
  display: inline-block;
  transition: transform 0.3s;
  transform: rotate(0deg);
}
.header.expand .sign:after {
  /*content:"\2B9F";*/
  transition: transform 0.3s;
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class='testclass'>
  <table>
    <thead>
      <tr class="header expand">
        <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
      </tr>
      <tr>
        <td><b>Data 2</b>
        </td>
        <td colspan="3">Data 2</td>
      </tr>

      <th colspan="4" class="center">Data 3</th>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

I think it's an issue with my jquery but I am not sure what is going wrong.  I also want to have some tables that expand when you hover over them, which I also got to work by removing <thead> 
and <tbody> tags for it I used this:
 $('.header').hover(function(){
        $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
    }); 

but it had an issue when I left the header area and the the table would collapse, so I could not use the expanded table area if the mouse left the header.  
Any idea what I am doing wrong? 

A:

Is this what you want

$('table tr:not(.header)').hide();

 /*$('.header').click(function() {
   $(this).toggleClass('expand');
   $(this).parent().parent().find('tbody tr').toggle();
 });*/

$('.header').mouseenter(function(){ 
  $(this).toggleClass('expand'); 
  $(this).parent().parent().find('tbody tr').slideToggle(100); 
});
$('table').mouseleave(function(){   
  $(this).find('.header').toggleClass('expand'); 
  $(this).find('tbody tr').slideToggle(100);

});
table,
tr,
td,
th {
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}
.header .sign:after {
  content: "\2B9D";
  display: inline-block;
  transition: transform 0.3s;
  transform: rotate(0deg);
}
.header.expand .sign:after {
  /*content:"\2B9F";*/
  transition: transform 0.3s;
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class='testclass'>
  <table>
    <thead>
      <tr class="header expand">
        <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
        <td><b>Data 1</b>
        </td>
        <td>Data 1</td>
      </tr>
      <tr>
        <td><b>Data 2</b>
        </td>
        <td colspan="3">Data 2</td>
      </tr>

      <th colspan="4" class="center">Data 3</th>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
        <td><b>Data 4</b>
        </td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

