JSFiddle - React, Tailwind, and code Playground

HTML

<button id="one">showLine1</button>
<table class="thetable">
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr class="togglebox">
    <td>hidden 1</td>
    <td>hidden 2</td>
</tr>
</table>

CSS

.togglebox {
    background-color:#CCC;
    height: 100px;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;   
    -ms-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}

td
{
width: 200px;
border: 1px solid #000;    
}

JavaScript

$(document).ready(function() {
    //Hide the toggle-area when page load
    $(".togglebox").height(100);
    
    //slide up and down when click over id #one
    $("#one").toggle(
        function()
            {
            $(".togglebox").height(200);
            },
        function()
            {
            $(".togglebox").height(100);
            });
    });