diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 1ad89f7..a655d5f 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -20,13 +20,22 @@
     // Expand details if there are errors inside, or if it contains an
     // element that is targeted by the URI fragment identifier.
     var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
-    if (this.$node.find('.error' + anchor).length) {
-      this.$node.attr('open', true);
+
+    this.$node.find('input, .error' + anchor).on('invalid', $.proxy(this.invalidHandler, this));
+
+    var $invalidTarget = this.$node.find('.error' + anchor);
+    if ($invalidTarget.length) {
+      $invalidTarget.trigger('invalid');
     }
+
     // Initialize and setup the summary,
     this.setupSummary();
-    // Initialize and setup the legend.
-    this.setupLegend();
+
+    if (!Modernizr.details) {
+      // Initialize and setup the legend.
+      this.setupLegend();
+    }
+
   }
 
   $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{
@@ -53,6 +62,8 @@
       this.$node
         .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
         .trigger('summaryUpdated');
+
+      this.$node.find('> summary').append(this.$summary);
     },
 
     /**
@@ -73,9 +84,7 @@
         .prepend($legend.contents())
         .appendTo($legend);
 
-      $legend
-        .append(this.$summary)
-        .on('click', $.proxy(this.onLegendClick, this));
+      $legend.on('click', $.proxy(this.onLegendClick, this));
     },
 
     /**
@@ -99,20 +108,36 @@
     /**
      * Toggle the visibility of a details element using smooth animations.
      */
-    toggle: function () {
-      var isOpen = !!this.$node.attr('open');
-      var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
-      if (isOpen) {
-        $summaryPrefix.html(Drupal.t('Show'));
+    toggle: function (isOpen) {
+      if (typeof isOpen == 'undefined') {
+        isOpen = !this.$node.attr('open');
+      }
+
+      if (!Modernizr.details) {
+        var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
+        if (isOpen) {
+          $summaryPrefix.html(Drupal.t('Hide'));
+        }
+        else {
+          $summaryPrefix.html(Drupal.t('Show'));
+        }
+        // Delay setting the attribute to emulate chrome behavior and make
+        // details-aria.js work as expected with this polyfill.
+        setTimeout(function () {
+          this.$node.attr('open', isOpen);
+        }.bind(this), 0);
       }
       else {
-        $summaryPrefix.html(Drupal.t('Hide'));
+        this.$node.attr('open', isOpen);
       }
-      // Delay setting the attribute to emulate chrome behavior and make
-      // details-aria.js work as expected with this polyfill.
-      setTimeout(function () {
-        this.$node.attr('open', !isOpen);
-      }.bind(this), 0);
+
+    },
+
+    /**
+     * Handle invalid event
+     */
+    invalidHandler: function () {
+      this.toggle(true);
     }
   });
 
@@ -123,11 +148,12 @@
    */
   Drupal.behaviors.collapse = {
     attach: function (context) {
-      if (Modernizr.details) {
-        return;
-      }
-      var $collapsibleDetails = $(context).find('details').once('collapse').addClass('collapse-processed');
+      var $collapsibleDetails = $(context).find('details').once('collapse');
       if ($collapsibleDetails.length) {
+        if (!Modernizr.details) {
+          $collapsibleDetails.addClass('collapse-processed');
+        }
+
         for (var i = 0; i < $collapsibleDetails.length; i++) {
           CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i]));
         }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 179628f..14cfe49 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -209,6 +209,9 @@ details {
 details > .details-wrapper {
   padding: 0.5em 1.5em;
 }
+details .details-title {
+  color: #333;
+}
 /* @todo Regression: The summary of uncollapsible details are no longer
      vertically aligned with the .details-wrapper in browsers without native
      details support. */
diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index d6e5e67..47dee72 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -26,6 +26,7 @@ hr {
   background: #cccccc;
 }
 summary,
+summary .details-title,
 .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
   text-transform: uppercase;