JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            <div id="wrap">
            <table>
                <tr>
                    <td>11111111111111111111111111111</td>
                    <td>2</td>
                    <td>3</td>
                    <td class="tohide">4</td>
                    <td class="tohide">5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td class="tohide">9</td>
                    <td class="tohide">10</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td class="tohide">14</td>
                    <td class="tohide">15</td>
                </tr>
            </table>
        </div>
            <p><span id="expand">Раскрыть</span><span id="collapse">Скрыть</span></p>
        </div>
</body>
</html>

CSS

div {
    background: black;
    padding: 30px;
}

table {
    width: 100%;
    table-layout: fixed;
    background: #fff;
}

table td {
    border: 1px solid black;
}

p span {
    color: #fff;
    cursor: pointer;
}

.tohide {
    display: none;
}

#collapse {
    display: none;
}

JavaScript

$(document).ready(function() {
    var expandButton = $('#expand');
    var collapseButton = $('#collapse');
    var trToHide = $('.tohide');
    var table = $('table')[0];
    
    expandButton.click(function() {
        $(this).hide();
        collapseButton.show();
        trToHide.show();
    });
    
    collapseButton.click(function() {
        $(this).hide();
        expandButton.show();
        trToHide.hide();
        $('table').remove().prependTo($('#wrap'));
    });
});