JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<table>
    <thead>
        <th class="col-1">Header 1</th>
        <th class="col-2">Header 2</th>
        <th class="col-3">Header 3</th>
        <th class="col-4">Header 4</th>
        <th class="col-5">Header 5</th>
        <th class="col-6">Header 6</th>
    </thead>
    <tbody>
        <tr>
            <td class="col-1">One</td>
            <td class="col-2">Two</td>
            <td class="col-3">Three</td>
            <td class="col-4">Four</td>
            <td class="col-5">Five</td>
            <td class="col-6">Six</td>
        </tr>
        <tr>
            <td class="col-1">One</td>
            <td class="col-2">Two</td>
            <td class="col-3">Three</td>
            <td class="col-4">Four</td>
            <td class="col-5">Five</td>
            <td class="col-6">Six</td>
        </tr>
        <tr>
            <td class="col-1">One</td>
            <td class="col-2">Two</td>
            <td class="col-3">Three</td>
            <td class="col-4">Four</td>
            <td class="col-5">Five</td>
            <td class="col-6">Six</td>
        </tr>
        <tr>
            <td class="col-1">One</td>
            <td class="col-2">Two</td>
            <td class="col-3">Three</td>
            <td class="col-4">Four</td>
            <td class="col-5">Five</td>
            <td class="col-6">Six</td>
        </tr>
    </tbody>
</table>
<input type="button" id="expand" value="expand">

CSS

.col-2 , .col-3 {
  width: 0;
}

JavaScript

$(document).ready(function () {
    cols = $(".col-2, .col-3");
    ///this variable gets all the cells of the table column for both 1 and 2
    //cols.hide();
    $("#expand").click(function(){
        cols.addClass('active');
    });
});