Bootstrap Tabs and Collapse

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs hidden-xs" role="tablist">
    <li role="presentation" class="active"><a href="#collapseOne" aria-controls="collapseOne" role="tab">Collapsible Group Item #1</a></li>
    <li role="presentation"><a href="#collapseTwo" aria-controls="collapseTwo" role="tab">Collapsible Group Item #2</a></li>
    <li role="presentation"><a href="#collapseThree" aria-controls="collapseThree" role="tab">Collapsible Group Item #3</a></li>
  </ul>


  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading visible-xs" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in tab-pane fade" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 1 wolf moon officia aute, non cupidatat skateboard dolor brunch.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading visible-xs" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse tab-pane fade" role="tabpanel" aria-labelledby="headingTwo">
        <div...

CSS

body>div {
  margin: 20px;
}

.nav-tabs>li>a {
  margin-right: 2px;
  background: #f6f6f6;
  border-color: #efeeeb;
  color: #3e3e3e;
  -webkit-transition: background 250ms ease;
  transition: background 250ms ease;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: #428bca;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

.nav-tabs>li.active>a {
  border-color: #efeeeb;
  border-bottom-color: #fff;
}

.nav-tabs li a:hover {
  color: #428bca;
}

.panel-group {
  border: 1px solid #ddd;
}

.panel-group .panel {
  border: 0;
}

.panel-group .panel+.panel {
  margin-top: 0;
}

JavaScript

$('.nav-tabs a').click(function(e) {
  e.preventDefault();
  if ($($(this).attr('href')).is(":visible")) return false;
  $(".panel-collapse").removeClass('in active').attr('style', '');
  $("#accordion .panel-title a").addClass("collapsed");
  $("#accordion .panel-title a[href='" + $(this).attr('href') + "']").removeClass("collapsed");
  $(this).tab('show');
});

$("#accordion .panel-title a").click(function(e) {
  if ($(this).parents('.panel').children('.panel-collapse').hasClass('in')) {
    e.stopPropagation();
  }
  $(".nav-tabs li").removeClass('active');
  $(".nav-tabs li a[href='" + $(this).attr('href') + "']").parent().addClass("active");
});