JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableau">
  <thead>
    <tr>
      <th class="colAtete">A</th>
      <th class="col notDisplayed"><div>B</div></th>
      <th class="col notDisplayed"><div>C</div></th>
      <th class="col notDisplayed"><div>D</div></th>
      <th class="col notDisplayed"><div>E</div></th>
      <th class="col notDisplayed"><div>F</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="colA">123123</th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
    </tr>
    <tr>
      <th class="colA">123123</th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
      <th class="col notDisplayed"><div>123123</div></th>
    </tr>
  </tbody>
</table>

CSS

table {
  margin: 40px 0 0 20px;
  border-collapse: collapse;
}
td, th {
  width: 100px;
  padding: 3px;
  border: 1px solid gray;
}
.colAtete {
  cursor: pointer;
}
thead, tbody {
  border: 3px solid black;
}
.notDisplayed {
  display: none;
}
.col > div {
  overflow: hidden;
}

JavaScript

$('#tableau .colAtete').click(function () {
  $('#tableau .col.notDisplayed').each(function () {
    var $this = $(this);
    var $div = $this.find('div');
    if ($this.is(':hidden')) {
    	console.log('showing the cells');
      $this.width(0).show(0);
      $div.animate({ width: 100 });
    } else {
    	console.log('hiding the cells');
      $div.animate({ width: 0 }, function () { $this.hide(0); });
    }
  });
});