JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adv-table">
  <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
    <thead>
      <tr>
        <th>expand</th>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
        <th>col 6</th>
        <th>col 7</th>
        <th>col 8</th>
        <th>col 9</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gradeA">
        <td class="center clickh">
          <img src="http://www.stemcor.com/images/plus.gif">
        </td>
        <td class="clickh">item 1</td>
        <td class="clickh">item 2</td>
        <td class="clickh">item 3</td>
        <td class="clickh">item 4</td>
        <td class="clickh">item 5</td>
        <td class="clickh">item 6</td>
        <td class="clickh">item 7</td>
        <td class="clickh">item 8</td>
        <td class="clickh">Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10" class="clickh">
          <div style="display: none;">
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
      <tr class="gradeA">
        <td class="center clickh">
          <img src="http://www.stemcor.com/images/plus.gif">
        </td>
        <td class="clickh">item 1</td>
        <td class="clickh">item 2</td>
        <td class="clickh">item 3</td>
        <td class="clickh">item 4</td>
        <td class="clickh">item 5</td>
        <td class="clickh">item 6</td>
        <td class="clickh">item 7</td>
        <td class="clickh">item 8</td>
        <td class="clickh">Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10" class="clickh">
          <div style="display: none;">
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
   ...

CSS

table {
  width: auto;
  border: 1px solid #aaa;
  margin-bottom: 15px;
  border-collapse: collapse;
}
th,
td {
  width: auto;
  border: 1px solid #aaa;
  padding: 10px;
}
caption {
  color: #222;
  font-weight: bold;
}

JavaScript

$('td').addClass("clickh");
$('.hideme').find('div').hide();

$('.clickh:first-child').click(function() {
  var img = $(".center img");
  if (img.attr('src') == 'http://www.stemcor.com/images/plus.gif') {
    // row expanded, so collapse...
    img.attr('src', 'http://www.stemcor.com/images/minus.gif');
  } else {
    // row collapsed, so expand...
    img.attr('src', 'http://www.stemcor.com/images/plus.gif')
  }
  $(this).parent().next('.hideme').find('div').slideToggle(500);
});