Click tr show/hide without jump

Using jQuery to create a simple accordion that closes 1 second after page load (so people can see that you can open it)

by Ying Chor Ding

HTML

<table>
     <tr class="main-header spot-button">
      <td></td>
      <td><a href="#">Profit</a></td>
      <td>35%</td>
      <td>22%</td>
      
   </tr>
   <tr class="hidden-row">
      <td></td>
      <td>
         <a href="#" >
            <div class="accordion"></div>
            Business - 1
         </a>
      </td>
      <td>35%</td>
      <td>22%</td>
      
   </tr>
   <tr class="hidden-row">
      <td></td>
      <td>Business - 2</td>
      <td>38%</td>
      <td>28%</td>
   </tr>
     
     <tr class="main-header spot-button">
      <td></td>
      <td><a href="#">Loss</a></td>
      <td>15%</td>
      <td>12%</td>
      
   </tr>
   <tr class="hidden-row">
      <td></td>
      <td>Business - 1</td>
      <td>35%</td>
      <td>22%</td>
      
   </tr>
   <tr class="hidden-row">
      <td></td>
      <td>Business - 2</td>
      <td>38%</td>
      <td>28%</td>
   </tr>
</table>

CSS

table{
    
    width:100%;
}

td{
    
    border:1px solid #000;
    padding:20px
    
}

.accordion{

}
.spot-button.active {
    background:#4289aa;
    cursor:default;
        
}

JavaScript

$(function () {
    $(".hidden-row").hide();
    
    $(".spot-button").click(function () {
        $(".hidden-row").hide();
        $(this).closest('.main-header').nextUntil(".main-header").slideToggle("slow");
        alert('$(this)')
       
        if($('.active').length > 0)
        {
            $('.active').removeClass("active");
        }
        $(this).toggleClass("active");
        $(this).siblings(".spot-button").removeClass("active");
        
    });
});