JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panelContainer">
    <div class="service">
      <div class="serviceBrief" title="Click to Read More">
        <p>Some Stuff for closed panel</p>
      </div> <!-- end serviceBrief -->
      <div class="serviceDescContainer">
        <div class="serviceDesc">
          <p>some more stuff that shows when panel is open</p>
        </div><!-- end serviceDesc -->
      </div><!-- end serviceDescContainer -->
     </div><!-- end service -->
   <div class="service">
     <div class="serviceBrief" title="Click to Read More">
       <p>Some Stuff for closed panel</p>
     </div> <!-- end serviceBrief -->
     <div class="serviceDescContainer">
       <div class="serviceDesc">
         <p>some more stuff that shows when panel is open</p>
       </div><!-- end serviceDesc -->
     </div><!-- end serviceDesc Container -->
  </div><!-- end service -->
</div> <!-- end panelContainer -->

JavaScript

$('.serviceBrief').each(function(){
    $(this).append('<div class="panelOpenArrow"></div><div class="panelClosedArrow"></div>');
});

$('.serviceBrief').click(function(e){
    var objThis = $(e.currentTarget);
    var objService = objThis.parent();
    if (objService.is('.open')) {
        objService.find('.serviceDescContainer').animate({'height':'0'},500);
        objService.find('.panelOpenArrow').fadeOut(500);
        objService.find('.panelClosedArrow').animate({'height': '25px'});
        objService.removeClass('open');
        objThis.attr("title", "Click to Read More");
    }else{
        var newHeight = objService.find('.serviceDesc').height() + 'px';
        objService.find('.serviceDescContainer').animate({'height':newHeight},500);
        objService.find('.panelOpenArrow').fadeIn(500);
        objService.find('.panelClosedArrow').animate({'height':'0'});
        objService.addClass('open');
        objThis.attr("title", "Click to Read Less");
    }
});