JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <table class="message-table" id="message-table">
    <tr class='message-body'>
      <th><i class='far fa-envelope'></i> title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr colspan='7'>
      <td class='message-body-body' colspan='7'>
        <p><br>some body text</p>
      </td>
    </tr>
    <tr class='message-body'>
      <th><i class='far fa-envelope'></i> title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr colspan='7'>
      <td class='message-body-body' colspan='7'>
        <p><br>some body text</p>
      </td>
    </tr>
    <tr class='message-body'>
      <th><i class='far fa-envelope'></i> title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr colspan='7'>
      <td class='message-body-body' colspan='7'>
        <p><br>some body text</p>
      </td>
    </tr>
  </table>
</center>

CSS

.message-table {
  width: 75%;
  margin-bottom: 50px;
  border-bottom: 2px solid black;
  text-align: left;
  white-space: nowrap;
}

.message-head {
  text-align: center;
  border-bottom: 2px solid black;
  white-space: nowrap;
}

.message-body:hover {
  background-color: #E5E7E9;
  cursor: pointer;
}

td.message-body-body {
  padding: 0 !important;
  background-color: rgba(237, 237, 237, .8);
}

JavaScript

$(function() {
  $("td[colspan=7]").find("p").hide();
  $("table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("tr").attr("colspan") > 1) {
      $target.closest("tr").prev().find("i:first").removeClass('fa-envelope-open').addClass('fa-envelope');
      $target.slideT();

    } else {
      $target.closest("tr").next().find("p").slideToggle();

      if ($target.closest("tr").find("i:first").hasClass('fa-envelope')) {
        $target.closest("tr").find("i:first").removeClass('fa-envelope').addClass('fa-envelope-open');
      } else {
        $target.closest("tr").find("i:first").removeClass('fa-envelope-open').addClass('fa-envelope');
      }
    }
  });
});