JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<center><table class="message-table" id="message-table">
<tr class='message-body'>
<th><i class='fa fa-envelope'></i> *icon here* 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();
        
        $('#message-table').find('th:first-child i').toggleClass("fa-envelope fa-envelope-open");
        
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.closest("td").children("p").slideUp();
			
			$target.closest("tr").prev().find("i:first").html("+");//CHANGE
			
        } else {
            $target.closest("tr").next().find("p").slideToggle();
			
            if ($target.closest("tr").find("td:first").html() == "+")//CHANGE
                $target.closest("tr").find("td:first").html("-");//CHANGE
            else
                $target.closest("tr").find("td:first").html("+"); //CHANGE
			
        }                    
    });
});