JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MessageContainer">
  <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>
<div class="MessageContainer">
  <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>
<div class="MessageContainer">
  <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>

CSS

.OpenMessageButton{
  background-color:red;
}

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

JavaScript

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