JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel-group accordion-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                text...
              </div>
            </div>
          </div>
        </div>

CSS

/*  ACCORDION  */
div.accordion-group .panel-body {
  padding: 15px;
}
div.accordion-group.compact .panel-default {
  border: none;
  border-radius: 0;
}
div.accordion-group.compact .panel-default .panel-heading {
  border: none;
  border-radius: 0 !important;
}
div.accordion-group.compact .panel-default .panel-heading + .panel-collapse .panel-body {
  border-top: none;
}
div.accordion-group.compact .panel + .panel {
  margin-top: 0;
}
div.accordion-group .panel-title {
  cursor: pointer;
  font-weight: 400;
}
div.accordion-group .panel-title:hover {
  color: #0070c4;
}
div.accordion-group .panel-title:hover:before {
  color: #0070c4;
}
div.accordion-group .panel-title:before {
  display: inline-block;
  margin-right: 5px;
  color: #59595b;
  -webkit-transition: all .2s;
  transition: all .2s;
  content: '\25B8';
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
div.accordion-group .panel-title.open:before {
  content: '\25B8';
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.no-csstransforms div.accordion-group .panel-title.open:before {
  content: '\25be';
}
div.accordion-group .panel-title a:hover {
  color: #0070c4;
  text-decoration: none;
}
.triangle-closed {
  content: '\25B8';
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.triangle-opened {
  content: '\25B8';
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.collapse-button {
  cursor: pointer;
}
.collapse-button:hover {
  color: #0070c4;
}
.collapse-button:hover:before {
  color: #0070c4;
}
.collapse-button:before {
  display: inline-block;
  margin-right: 5px;
  color: #59595b;
  -webkit-transition: all .2s;
  transition: all .2s;
  content: '\25B8';
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.collapse-button.open:before {
  content: '\25B8';
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.no-csstransforms .collapse-button.open:before {
  content: '\25be';
}

JavaScript

$(function() {
	  
	   $('h4.panel-title').on('click', function(event) {
	   		// remove "open" class from all headers in this group
	   		$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
           $(this).closest('.accordion-group').find('.collapse').removeClass("in");
	   		// then set the one clicked on to open
	   		$(this).addClass('open');
           $(this).parent().next(".collapse").addClass("in");
	   });
    });