JSFiddle - React, Tailwind, and code Playground

HTML

<div class="OpenMessageButton">Click to Open/Close</div>
<div class="panel panel-default messageContent">
  <div class="panel-body">
    <h4 class="card-title">Message: </h4>
    <p class="card-text">Text.</p>
  </div>
</div>

<div class="OpenMessageButton">Click to Open/Close</div>
<div class="panel panel-default messageContent">
  <div class="panel-body">
    <h4 class="card-title">Message: </h4>
    <p class="card-text">Text.</p>
  </div>
</div>

<div class="OpenMessageButton">Click to Open/Close</div>
<div class="panel panel-default messageContent">
  <div class="panel-body">
    <h4 class="card-title">Message: </h4>
    <p class="card-text">Text.</p>
  </div>
</div>

CSS

.OpenMessageButton{
  background-color:red;
}

.messageContent{
  display: none;
  background-color:yellow;
}

JavaScript

$('.OpenMessageButton').on('click',function(){
      var link = $(this);      
      $('.panel.panel-default.messageContent').slideToggle('fast', function(){
        if ($(this).is(':visible')){
          link.text('Close');                    
        }else{
          link.text('Open');                    
        }
      });           
  });