JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!
<div class="flipClass" id="flip1">FIRST HEADING</div>
<div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div>
<div class="flipClass" id="flip2">SECOND HEADING</div>
<div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

CSS

.panelClass,
.flipClass {
  padding: 5px;
  padding-left: 15px;
  border: solid 1px #c3c3c3;
}
.flipClass {
  font-size: Large;
  background-color: #4399CD;
  color: #fff;
  text-align: left;
}
.flipClass.active {
  background: #fff;
  color: #4399CD;
  cursor: pointer;
  transition: all .1s ease-out;
}
.flipClass.active:before {
  content: '\f102';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}
.panelClass {
  padding: 30px;
  padding-top: 10px;
  display: none;
  background-color: #F3F5F6;
  color: #000;
}
.flipClass:before {
  content: '\f107';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}

JavaScript

$("div[id^=flip]").click(function() {
   $(this).toggleClass('active').next("div[id^=panel]").stop().slideToggle("slow");
 });