JSFiddle - React, Tailwind, and code Playground

by Andyone

HTML

<div class="wrapper">
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
              <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
              <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
              <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>something</td>
 ...

CSS

.wrapper {overflow:hidden; visibility:hidden; display:inline-block}
td {border:1px solid #ccc; padding:10px; margin-bottom:-1px; background:#f2f2f2}
.buttons {display:inline-block; vertical-align:top; margin-left:15px}
.buttons > input {display:block; margin-bottom:10px}

JavaScript

$(function(){
    var wrapper = $('.wrapper');
    var initialHeight = $('tr:first').outerHeight();
    wrapper.height(initialHeight + 1).css('visibility','visible');
    
    var trIndex = 0;
    $('input.expand').click(function(){
        trIndex++;
        var nextTr = $('tr').eq(trIndex);
        if(nextTr.length === 1){
            var addHeight = $('tr').eq(trIndex).outerHeight();
            var currentHeight = wrapper.outerHeight();
            wrapper.animate({height: currentHeight + addHeight},250);
        }else{
            trIndex--;
        }
    });
    $('input.contract').click(function(){
        var nextTr = $('tr').eq(trIndex);
        if(nextTr.prev().length === 1){
            var subtractHeight = $('tr').eq(trIndex).outerHeight();
            var currentHeight = wrapper.outerHeight();
            wrapper.animate({height: currentHeight - subtractHeight},250);
            trIndex--;
        }
    });
});