JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class="teamicon">
    <td style="text-align: center;" width="100%" valign="middle">
    Team icon
    </td>
  </tr>
  <tr class="teamval">
    <td valign="middle" width="100%">
    team val
    </td>
  </tr> 
</table>

JavaScript

jQuery(document).ready(function(){
$('.teamval').slideUp(400);
$('.teamicon').click(function(){
    if ($(this).next('tr').is(":hidden"))
    {   
      var nextTeamval = $(this).next('tr.teamval');
      nextTeamval.find('td').slideDown(400, function(){
        nextTeamval.slideDown(400);
      });
    }
});
});