table click tr show/hide

by Ying Chor Ding

HTML

<table>
     <tr data-num="A1" class="accordion">
      <td>1</td>
      <td><a href="#">Profit</a></td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   <tr class="hidden-row A1">
      <td>asd</td>
      <td>asd</td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   
   <tr data-num="A2" class="accordion">
      <td>2</td>
      <td><a href="#">Loss</a></td>
      <td>15%</td>
      <td>12%</td>
   </tr>
   <tr class="hidden-row A2">
      <td></td>
      <td>aasd</td>
      <td>35%</td>
      <td>22%</td>
   </tr>
     
</table>

CSS

table{
    
    width:100%;
}

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

.accordion{

}
.active {
    background:red;
    cursor:default;
        
}

JavaScript

$(document).ready(function() {
  $(".hidden-row").hide();
    $('.accordion').click(function() {
        
        var openTRClass = $(this).closest('tr').attr('data-num');
        
       $(".hidden-row:visible").slideUp("fast");
       $("."+ openTRClass).slideToggle("fast")
       
        if($('.active').length > 0)
        {
            $('.active').removeClass("active");
        }
        $(this).toggleClass("active");
        
    });
});