JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<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);
}

i.fa-envelope {
  color: red;
}

i.fa-envelope-open {
  color: blue;
}

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.slideUp();

      $target.closest("tr").prev().find("i:first").removeClass('fa-envelope-open').addClass('fa-envelope').text("+");

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

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