JSFiddle - React, Tailwind, and code Playground

by willslab

HTML

<div class="message">
    <h2 class="messageSubject">Subject<label class="slideDown"> Read </label></h2>
    <label class="messageSender"> Sender </label>
    <div class="bodyWrapper">
        <p class="messageBody hidden"> Body </p>
    </div>
</div>
<div class="message">
    <h2 class="messageSubject">Subject<label class="slideDown"> Read </label></h2>
    <label class="messageSender"> Sender </label>
    <div class="bodyWrapper">
        <p class="messageBody hidden"> Body </p>
    </div>
</div>

CSS

.hidden {
display: none;   
}

JavaScript

$('.slideDown').click(function() {
  $(this).closest(".message").find('.messageBody').slideToggle('slow');
});