JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>sam</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>7</td>
        <td>john</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bob</td>
        <td>africa</td>
        <td style="display:none;">new</td>
    </tr>
</table>
<button>button</button>

CSS

table td{ border:solid 1px red; }
table td:nth-child(4){ display: block;}

JavaScript

$( document ).ready( function () {
    var content = $( "td:nth-child(3)" ).hide();
    $( "button" ).on( "click", function() {
        content.toggle( "slide", { direction: "right" }, 1000);
    });
});