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() {
	$('.serviceBrief').each(function(i) {
		$(this).append(
			$('<div />', { class: 'panelArrow panelOpenArrow' }),
			$('<div />', { class: 'panelArrow panelClosedArrow' })
		)
	})
	.click(function(e) {
		var aroOpen = $(this).children('.panelOpenArrow'),
			aroClose = $(this).children('.panelClosedArrow');
		$(this).next('.serviceDescContainer').slideToggle(500, function(e) {
			if ($(this).is(':visible')) {
				$(this).closest('.service').addClass('open');
				aroOpen.stop().fadeOut(500);
				aroClose.stop().animate({ height: '16px' });
			}
			else {
				$(this).closest('.service').removeClass('open');
				aroOpen.stop().fadeIn(500);
				aroClose.stop().animate({ height: 0 });
			}
		})
	});
})