JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expandable">
  <a href="#" class="expandable-expander">
    <span class="arrows">This is our arrow element</span>
  </a>
  <div class="expandable-content">
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
  </div>
</div>

CSS

.arrows {
  /* this is the default state and as the default we want the arrow closed
     so the bg position 0 0 is for the closed state */
  width:20px;
  height:15px;
  margin:0px auto;
  display: inline-block;
  background: #f00 url(images/morearrows.png) no-repeat 0 0;
  text-indent: -999em;
}
.expandable {
  width:220px;
}
.expandable .expandable-expander {
   display: block;
   background: #ccc;
   width:220px;
   height:8px;
   border:outset 1px #ddd;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   background:#ddd;
   border-radius:25px;
   cursor:pointer;
   overflow:hidden;
}

.expandable .expandable-content {
   
   /* content is hidden at first unles .expandable is also .open */
    display: none;
}

.expandable.open .expandable-content {
   display: block;
}

.expandable .expandable-expander:hover {
   background:#eee;
   height:15px; 
}

.expandable.open .expandable-expander .arrows {
   background-position: 0 -10px; 
   /* only change the background position because everything else is set up */
    background-color: #0f0;
}

JavaScript

$('.expandable .expandable-expander').click(function (e) {
       var $this = $(this),
           $container = $this.closest('.expandable'),
           $content = $container.find('.expandable-content');
       e.preventDefault();
       
       $content.slideToggle(100, function () {
           $container.toggleClass('open');
       });
   });