diff --git a/core/misc/vertical-tabs.es6.js b/core/misc/vertical-tabs.es6.js
index c7ad2fd..02c4a88 100644
--- a/core/misc/vertical-tabs.es6.js
+++ b/core/misc/vertical-tabs.es6.js
@@ -53,7 +53,19 @@
 
         // Create the tab column.
         var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
-        $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
+        $this
+          .wrap('<div class="vertical-tabs clearfix"></div>')
+          .before(tab_list)
+          // If there are no visible tab panes, hide the whole vertical-tabs
+          // area.
+          .on('updateTabPaneSet', function() {
+            var tab_set = $this.parent();
+            tab_set.show();
+            var $panes = $('> details:visible', this);
+            if ($panes.length == 0) {
+              tab_set.hide();
+            }
+        });
 
         // Transform each details into a tab.
         $details.each(function () {
@@ -69,6 +81,31 @@
             // the style won't apply to them if prop() is used.
             .attr('open', true)
             .addClass('vertical-tabs__pane')
+            // Override the default state:visible handler.
+            .on('state:visible.verticalTabs', function (e) {
+              if (e.target == this && e.trigger) {
+                // Get the id of the vertical tab.
+                var id = $(e.target).closest('.form-item, .form-submit, .form-wrapper').attr('id');
+                if (id) {
+                  if (!e.value) {
+                    if ($(vertical_tab.details.context).is(':visible')) {
+                      vertical_tab.tabHide().updateSummary();
+                    }
+                    else {
+                      vertical_tab.item.hide();
+                      vertical_tab.updateSummary();
+                    }
+                  }
+                  else if(e.value) {
+                    vertical_tab.item.show();
+                    vertical_tab.updateSummary();
+                  }
+                  $this.trigger('updateTabPaneSet');
+                  // Don't bubble this up to the default handler.
+                  e.stopPropagation();
+                }
+              }
+            })
             .data('verticalTab', vertical_tab);
           if (this.id === focusID) {
             tab_focus = $that;
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index c47a7cb..076550b 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -29,7 +29,14 @@
         }
 
         var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
-        $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
+        $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list).on('updateTabPaneSet', function () {
+          var tab_set = $this.parent();
+          tab_set.show();
+          var $panes = $('> details:visible', this);
+          if ($panes.length == 0) {
+            tab_set.hide();
+          }
+        });
 
         $details.each(function () {
           var $that = $(this);
@@ -38,7 +45,27 @@
             details: $that
           });
           tab_list.append(vertical_tab.item);
-          $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', vertical_tab);
+          $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').on('state:visible.verticalTabs', function (e) {
+            if (e.target == this && e.trigger) {
+              var id = $(e.target).closest('.form-item, .form-submit, .form-wrapper').attr('id');
+              if (id) {
+                if (!e.value) {
+                  if ($(vertical_tab.details.context).is(':visible')) {
+                    vertical_tab.tabHide().updateSummary();
+                  } else {
+                    vertical_tab.item.hide();
+                    vertical_tab.updateSummary();
+                  }
+                } else if (e.value) {
+                  vertical_tab.item.show();
+                  vertical_tab.updateSummary();
+                }
+                $this.trigger('updateTabPaneSet');
+
+                e.stopPropagation();
+              }
+            }
+          }).data('verticalTab', vertical_tab);
           if (this.id === focusID) {
             tab_focus = $that;
           }