// 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 = $(this).closest('.panel-group'); var $prevTabPane = $(this).closest('.tab-pane').prev('.tab-pane'); var href = $prevTabPane.attr('id') var $prevNavItem = $prevTabPane.closest('.panel-group').find('.nav-tabs a[data-target="#' + href + '"]').closest('li') activatePanelGroup($prevNavItem, $prevTabPane, $panelGrp) } }); // tab into next pane var lastPanelInputs = $(".panel").map(function(){ var lastInput = $(this).find(":input:last") return lastInput.length > 0 ? lastInput[0] : null }).get(); $(lastPanelInputs).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 = $(this).closest('.panel-group'); var $nextTabPane = $(this).closest('.tab-pane').next('.tab-pane'); var href = $nextTabPane.attr('id'); var $nextNavItem = $nextTabPane.closest('.panel-group').find('.nav-tabs a[data-target="#' + href + '"]').closest('li'); activatePanelGroup($nextNavItem, $nextTabPane, $panelGrp); } }); function activatePanelGroup($navItem, $tabPane, $panelGrp) { $navItem.addClass('active'); $tabPane.find('.panel-title').addClass('active'); $tabPane.find('.panel-body').collapse('show'); setToggleDirection($panelGrp); } function updatePanelGroup($navItem, $tabPane, $panelGrp) { $navItem.toggleClass('active'); $tabPane.find('.panel-title').toggleClass('active'); $tabPane.find('.panel-body').collapse('toggle'); setToggleDirection($panelGrp); } function setToggleDirection($panelGrp) { var $toggler = $panelGrp.find(".panel-group-toggle"); var $navItems = $panelGrp.find(".nav-tabs li"); var allActive = $navItems.length === $navItems.filter(".active").length; $toggler.toggleClass('all-visible', allActive); }
<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> <div class="panel-body collapse in"> Profile Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="level"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Level</h3> </div> <div class="panel-body collapse "> Level Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="services"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Services</h3> </div> <div class="panel-body collapse"> Services Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="diagnoses"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Diagnoses</h3> </div> <div class="panel-body collapse"> Diagnoses Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="address"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Address</h3> </div> <div class="panel-body collapse"> Address Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="adopted"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Adopted</h3> </div> <div class="panel-body collapse"> Adopted Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="cultural"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Cultural</h3> </div> <div class="panel-body collapse"> Cultural Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="economic"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Economic</h3> </div> <div class="panel-body collapse"> Economic Body <input type="text"> <input type="text"> </div> </div> </div> <div class="tab-pane in" id="insurance"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Insurance</h3> </div> <div class="panel-body collapse"> Insurance Body <input type="text"> <input type="text"> </div> </div> </div> </div> </div> <button name="submit" value="save" type="submit" class="btn btn-primary"> <span class="fa fa-save"></span> Save </button>
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; }