Bootstrap Panels

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<h3>Panel Group Demo</h3>

<div class="panel-group">
  <div class="panel-group-header" data-spy="affix" data-offset-top="60" >
    <ul class="nav nav-tabs" >
      <li style="margin-top:7px;">  
        <button class="btn btn-default panel-group-toggle btn-sm">
          <span class="toggle-show"><span class="fa fa-toggle-off fa-fw"></span> Show All</span>
          <span class="toggle-hide"><span class="fa fa-toggle-on fa-fw"></span> Hide All</span>
        </button>
      </li>
      <li class="active"><a href="javascript:void(0);" data-target="#profile">Profile</a></li>
      <li><a href="javascript:void(0);" data-target="#level">Level</a></li>
      <li><a href="javascript:void(0);" data-target="#services">Services</a></li>
      <li><a href="javascript:void(0);" data-target="#diagnoses">Diagnoses</a></li>
      <li><a href="javascript:void(0);" data-target="#address">Address</a></li>
      <li><a href="javascript:void(0);" data-target="#adopted">Adopted</a></li>
      <li><a href="javascript:void(0);" data-target="#cultural">Cultural</a></li>
      <li><a href="javascript:void(0);" data-target="#economic">Economic</a></li>
      <li><a href="javascript:void(0);" data-target="#insurance">Insurance</a></li>
    </ul>
  </div>
  <div class="tab-content">

    <div class="tab-pane in" id="profile">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title active">Profile</h3>
        </div>
 ...

CSS

body {
  margin: 15px;
}

.tab-content > .tab-pane.in {
  display: block;
}

.panel-group-toggle .toggle-show {
  display: block;
}

.panel-group-toggle .toggle-hide {
  display: none;
}

.panel-group-toggle.all-visible .toggle-show {
  display: none;
}

.panel-group-toggle.all-visible .toggle-hide {
  display: block;
}

.panel-title:hover {
  cursor: pointer;
}

.panel-group .tab-pane {
  margin-bottom: 2.5px;
}

.panel-heading .panel-title:after {
  font-family: 'Glyphicons Halflings';
  content: "\2b";
  float: right;
  color: grey;
}

.panel-heading .panel-title.active:after {
  content: "\2212";
}
.panel-heading .panel-title:after {
  font-family: 'Glyphicons Halflings';
  content: "\2b";
  float: right;
  color: grey;
}

.panel-heading .panel-title.active:after {
  content: "\2212";
}

.panel-group .panel-group-header {
  background: white;
  padding-top: 10px;
  width: 100%;
}
.panel-group .panel-group-header.affix {
  position: fixed;
  top: 0px;
  z-index: 99;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.panel-group .panel-group-header.affix + .tab-content {
  margin-top: 95px;
}

JavaScript

// all tabe panes visible (in)
// we only toggle their contents

// trigger via nav-tabs or tab panel-title

// 3 things to update
// 1) nav-tabs li > .active
// 2) tab-pane panel-heading > .active
// 2) tab-pane panel-body > collapse (.in)

$('.panel-group').on('click', '.nav-tabs li', function (e) {
  var $navItem = $(this);
  var $tabPane = $($(this).find('a').data('target'));
  var $panelGrp = $(this).closest('.panel-group');

  updatePanelGroup($navItem, $tabPane, $panelGrp);
});


$('.panel-group').on('click', '.tab-content .panel-title', function (e) {
  var $panelGrp = $(this).closest('.panel-group');
  var $tabPane = $(this).closest('.tab-pane');
  var href = $tabPane.attr('id');
  var $navItem = $tabPane.closest('.panel-group').find('.nav-tabs a[data-target="#' + href + '"]').closest('li')

  updatePanelGroup($navItem, $tabPane, $panelGrp);

});


$('.panel-group .panel-group-toggle').on('click', function (e) {
  var $toggler = $(this);
  var $tabPanes = $toggler.closest('.panel-group').find('.tab-pane');
  var $navItems = $toggler.closest('.panel-group').find('.nav-tabs li');

  if ($toggler.hasClass('all-visible')) {
    // if everything is visible, then collapse everything
    $navItems.removeClass('active');
    $tabPanes.find('.panel-title').removeClass('active');
    $tabPanes.find('.panel-body').collapse('hide');

  } else {
    // otherwise we'll show everything
    $navItems.addClass('active');
    $tabPanes.find('.panel-title').addClass('active');
    $tabPanes.find('.panel-body').collapse('show');
  }
  $toggler.toggleClass('all-visible');
  return false;
}).click();


// tab back into prev pane
var firstPanelInputs = $(".panel").map(function(){ 
		var firstInput = $(this).find(":input:first")
	return firstInput.length > 0 ? firstInput[0] : null
}).get();
$(firstPanelInputs).keydown(function (e) {
  // did we hit tab
  if (e.which === 9 && event.shiftKey) {
    // leaving last item in panel, make sure next one is open

    var $panelGrp =...