JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
<table>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr class="more">
  <td>More</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
</table>
</div>

CSS

.table {
    height: 110px;
    overflow-y: scroll;
}

.hidden {
  display: none;
}

JavaScript

$('.more').click(function() {
	var self = $(this);
	var table = self.parents('.table');
  
  if (!self.hasClass('hidden')) {
  	self.addClass('hidden');
    table.css({
    	'height': 'auto'
    });
  } else {
  	table.css({
    	'height': '110px'
    });
    self.removeClass('hidden');
  }
});