diff --git a/templates/elements/details.html.twig b/templates/elements/details.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..74bc631f551fcc5106e0b68056d2a0b8436a3048
--- /dev/null
+++ b/templates/elements/details.html.twig
@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - summary_attributes: A list of HTML attributes for the summary element.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ *
+ * @see template_preprocess_details()
+ */
+#}
+{#
+Prefix 'details' class to avoid collision with Modernizr.
+
+@todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
+#}
+<details{{ attributes.addClass('seven-details') }}>
+  {%- if title -%}
+    {%
+      set summary_classes = [
+      'seven-details__summary',
+      required ? 'js-form-required',
+      required ? 'form-required',
+    ]
+    %}
+    <summary{{ summary_attributes.addClass(summary_classes) }}>
+      {% if form_field_id %}
+        <label for="{{ form_field_id }}">{{ title }}</label>
+      {% else %}
+        <span>{{ title }}</span>
+      {% endif %}
+    </summary>
+  {%- endif -%}
+  <div class="seven-details__wrapper details-wrapper">
+    {% if errors %}
+      <div class="form-item form-item--error-message">
+        <strong>{{ errors }}</strong>
+      </div>
+    {% endif %}
+    {%- if description -%}
+      <div class="seven-details__description">{{ description }}</div>
+    {%- endif -%}
+    {%- if children -%}
+      {{ children }}
+    {%- endif -%}
+    {%- if value -%}
+      {{ value }}
+    {%- endif -%}
+  </div>
+</details>
diff --git a/uw_fdsu_theme_resp.theme b/uw_fdsu_theme_resp.theme
index cdec19c6cc9d42740b67b295b2b78fe3ed1bca5d..77304427a743ff05d9e6087155956f86c31f6652 100644
--- a/uw_fdsu_theme_resp.theme
+++ b/uw_fdsu_theme_resp.theme
@@ -687,3 +687,44 @@ function uw_fdsu_theme_resp_preprocess_container(&$variables) {
     }
   }
 }
+
+/**
+ * Implements template_preprocess_details().
+ */
+function uw_fdsu_theme_resp_preprocess_details(&$variables) {
+
+  // ISTWCMS-6711: this comes from the label not having the
+  // correct for in it.  So we are going to check if this is
+  // a better exposed filter and if so then add the correct
+  // based on the type of exposed filter it is.  The date
+  // filter needs special treatment, since it is using the
+  // wrapper as the data drupal selector, and we need it to
+  // use the -value.  If it is not a bef, then check if there
+  // is a data drupal selector and use it as the form field id.
+  if (
+    isset($variables['element'][0]['#context']['#plugin_type']) &&
+    $variables['element'][0]['#context']['#plugin_type'] == 'bef'
+  ) {
+
+    // If this is a date picker, then change the form field id
+    // to use -value instead of -wrapper.  If not then just use
+    // the straight data drupal selector.
+    if ($variables['element'][0]['#context']['#plugin_id'] == 'bef_datepicker') {
+      $variables['form_field_id'] = str_replace(
+        '-wrapper',
+        '-value',
+        $variables['element'][0]['#attributes']['data-drupal-selector']
+      );
+    }
+    else {
+      $variables['form_field_id'] = $variables['element'][0]['#attributes']['data-drupal-selector'];
+    }
+  }
+  else {
+
+    // If there is a data drupal selector use it for form field id.
+    if (isset($variables['element'][0]['#attributes']['data-drupal-selector'])) {
+      $variables['form_field_id'] = $variables['element'][0]['#attributes']['data-drupal-selector'];
+    }
+  }
+}