Bootstrap Tabs and Collapse

by Peter Aad

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" id ="equipment-details-modal">

  <!-- 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 class="panel-body">
    ...

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; 
    border-top-color:#fff;
}
.panel-group .panel {
    border:0;
}
.panel-group .panel+.panel {
margin-top:0;
}
.panel-group .panel .panel-body{
 border-top:0 none !important;   
}

JavaScript

var $tabLinks = '.nav-tabs a',
        $accordionLinks = '#accordion .panel-title a';

        $(tabLinks).click(function (e) {
          e.preventDefault();
          var thisHash = $(this).attr('href');
          // already displayed?
          if ( $(thisHash).is(':visible') ) return false;

          $('.panel-collapse').removeClass('in active').attr('style','');  
          $(accordionLinks).addClass('collapsed');
          $(accordionLinks+'[href='+thisHash+']').removeClass('collapsed'); 
          $(this).tab('show');
        });

        $(accordionLinks).click(function (e) {
          var thisHash = $(this).attr('href');
            // already displa{yed?
            if($(this).parents('.panel').children('.panel-collapse').hasClass('in')) {
                e.stopPropagation();
                return false;
            }

          $('.nav-tabs li').removeClass('active');
          $($tabLinks+'[href='+thisHash+']').parent().addClass('active');
        });