JSFiddle - React, Tailwind, and code Playground

by Milomir Topic

HTML

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>  
</table>

CSS

table {
  width: 100%;
  text-align: center;
}

.toggle {
  background: red;
}
.toggle td:after {
  content: "Show All";
}
.toggle.tataratira td:after {
  content: "Show Less";
}

JavaScript

$('table tr').hide().slice(0,2).addClass('fixed').show();
$('<tr class="toggle"><td colspan="4"></td></tr>').appendTo('table').click( function() {
   $('tr:not(.toggle, .fixed)').toggle();
   $(this).toggleClass("tataratira")
});