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 class="close hidden">close</div>
</div>

CSS

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

.hidden {
  display: none;
}

JavaScript

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

$('.close').click(function() {
		var self = $(this);
		var table = self.parents('.table');
    var more = table.find('.more');
    
		table.css({
    	'height': '110px'
    });
    self.addClass('hidden');
    more.removeClass('hidden');
});