JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href=" //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br /><br />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="accordion panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading active">
            <h4 class="panel-title">
            <input type="radio" name="optradio" class="rd-btn" checked>
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Our Mission
              </a>
            </h4>
          </div><!-- /.panel-heading -->
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            </div>
          </div><!-- /#collapseOne -->
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
             <input type="radio" name="optradio" class="rd-btn">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Success Stories
              </a>
            </h4>
          </div><!-- /.panel-heading -->
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum...

CSS

.panel-heading.active {
  
  border:1px solid #eee;
}

JavaScript

$('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('active');
    
    //If the panel was open and would be closed by this click, do not active it
    if(!$(this).closest('.panel').find('.panel-collapse').hasClass('in'))
        $(this).parents('.panel-heading').addClass('active');
        $(this).parents('.panel-heading').attr('checked');
 });