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 -->

CSS

.serviceDescContainer { display: none; }
.serviceBrief { cursor: pointer; padding-left: 20px; position: relative; }
.serviceBrief p { cursor: pointer; }
.panelArrow {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_454545_256x240.png);
    display: block;
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px;
}
.panelOpenArrow { background-position: 0 -192px; }
.panelClosedArrow { background-position: -16px -192px; height: 0px; }

JavaScript

$(function() {	//	same as $(document).ready ... but SHORTER!
	$('.serviceBrief').each(function(i) {	//	of course i stands for the 0 based index of the elements in this object
		$(this).append(	//	many different ways to (pre|ap)pend elemnts, this is my fav do to the "readability"
			$('<div />', { class: 'panelArrow panelOpenArrow' }),	//	set attributes in the {  }
			$('<div />', { class: 'panelArrow panelClosedArrow' })	//	don't forget to place comma before appending more elements
			//	keep in mind, you could continue inside here and append to what is being appended!
		)
	})	//	here I continue to "chain", no need to recall the same object
	.click(function(e) {	//	simple click event, you might also look at "delegate"ing events
		var aroOpen = $(this).children('.panelOpenArrow'),
			aroClose = $(this).children('.panelClosedArrow');
			//	i establish these variable for ease of use in next event
		
		//	considering the way your HTML is layed, there's really no need for all that "find"ing, it's just more code time, less action time!
		$(this).next('.serviceDescContainer').slideToggle(500, function(e) {	//	this is much the same as what you were trying to do using .animate
			if ($(this).is(':visible')) {	//	kind of like your class check, except this checks the display, opacity, and even considers height (in newer jQuery versions) for "visibility"
				//	at this point, this first line is "unneccesary", but I left it here in case you were doing some "CSS" using that class name
				$(this).closest('.service').addClass('open');
				//	.stop prevents animations previously taking place, like if a user clicks this real fast
				aroOpen.stop().fadeOut(500);
				aroClose.stop().animate({ height: '16px' });
			}
			else {
				$(this).closest('.service').removeClass('open');
				aroOpen.stop().fadeIn(500);
				aroClose.stop().animate({ height: 0 });
			}
		})
	});
})