diff --git a/includes/admin.inc b/includes/admin.inc
index e9285c1..9773dd1 100644
--- a/includes/admin.inc
+++ b/includes/admin.inc
@@ -24,7 +24,6 @@ function views_ui_get_admin_css() {
   $list = array();
   $list[$module_path . '/css/views-admin.css'] = array();
   $list[$module_path . '/css/views-admin.theme.css'] = array();
-  $list[$module_path . '/css/collapsible-div.css'] = array();
 
   // Add in any theme specific CSS files we have
   $themes = list_themes();
@@ -931,8 +930,6 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) {
     }
   }
 
-  $form['#attached']['js'][] = drupal_get_path('module', 'views') . '/js/collapsible-div.js';
-
   $form['#tree'] = TRUE;
   // @todo When more functionality is added to this form, cloning here may be
   //   too soon. But some of what we do with $view later in this function
@@ -1617,21 +1614,19 @@ function views_ui_get_display_tab_details($view, $display) {
   $build['columns']['second']['footer'] = array();
   $build['columns']['second']['pager'] = array();
 
-  // The third column buckets are wrapped in a views collapsible div
-  $build['columns']['third']['#theme_wrappers'] = array('container');
-  $build['columns']['third']['#attributes'] = array('class' => array('views-display-column', 'third', 'views-collapsible-container'));
-  // Specify an id that won't change after AJAX requests, so ctools can keep
-  // track of the user's preferred collapsible state. Use the same id across
-  // different displays of the same view, so changing displays doesn't
-  // recollapse the column.
-  $build['columns']['third']['#attributes']['id'] = 'views-ui-advanced-column-' . $view->name;
+  $build['columns']['third'] = array(
+    '#type' => 'views_collapsible',
+    '#handle' => '<a href="">' . t('Advanced') . '</a>',
+    '#attributes' => array(
+      'class' => array(
+        'views-display-column',
+        'third',
+      ),
+    ),
+    '#id' => 'views-ui-advanced-column-' . $view->name,
+  );
   // Collapse the div by default.
-  if (!config('views.settings')->get('ui.show.advanced_column')) {
-    $build['columns']['third']['#attributes']['class'][] = 'views-collapsed';
-  }
-  $build['columns']['third']['advanced'] = array('#markup' => '<h3 class="views-collapsible-handle"><a href="">' . t('Advanced') . '</a></h3>');
-  $build['columns']['third']['collapse']['#theme_wrappers'] = array('container');
-  $build['columns']['third']['collapse']['#attributes'] = array('class' => array('views-collapsible-content'));
+  $build['columns']['third']['#collapsed'] = !config('views.settings')->get('ui.show.advanced_column');
 
   // Each option (e.g. title, access, display as grid/table/list) fits into one
   // of several "buckets," or boxes (Format, Fields, Sort, and so on).
diff --git a/theme/theme.inc b/theme/theme.inc
index 1251472..8f0c034 100644
--- a/theme/theme.inc
+++ b/theme/theme.inc
@@ -8,30 +8,6 @@
 use Drupal\Core\Template\Attribute;
 
 /**
- * Render a collapsible div.
- *
- * @param $handle
- *   Text to put in the handle/title area of the div.
- * @param $content
- *   Text to put in the content area of the div, this is what will get
- *   collapsed
- * @param $collapsed = FALSE
- *   If true, this div will start out collapsed.
- */
-function theme_views_collapsible($vars) {
-  views_add_js('collapsible-div');
-  views_add_css('collapsible-div');
-
-  $class = $vars['collapsed'] ? ' views-collapsed' : '';
-  $output = '<div class="views-collapsible-container' . $class . '">';
-  $output .= '<div class="views-collapsible-handle">' . $vars['handle'] . '</div>';
-  $output .= '<div class="views-collapsible-content">' . $vars['content'] . '</div>';
-  $output .= '</div>';
-
-  return $output;
-}
-
-/**
  * Provide a full array of possible themes to try for a given hook.
  *
  * @param $hook
diff --git a/views.module b/views.module
index ae590e2..811076b 100644
--- a/views.module
+++ b/views.module
@@ -247,11 +247,73 @@ function views_theme($existing, $type, $theme, $path) {
     'variables' => array('more_url' => NULL, 'link_text' => 'more', 'view' => NULL),
   );
 
-  $hooks['views_collapsible'] = $base + array(
-    'variables' => array('handle' => NULL, 'content' => NULL, 'collapsed' => FALSE),
+  return $hooks;
+}
+
+/**
+ * Implements hook_library_info().
+ */
+function views_library_info() {
+  $path = drupal_get_path('module', 'views');
+  $libraries['drupal.collapsible'] = array(
+    'title' => 'Collapsible Div',
+    'version' => '1.0',
+    'js' => array(
+      $path . '/js/collapsible-div.js' => array(),
+    ),
+    'css' => array(
+      $path . '/css/collapsible-div.css' => array(),
+    ),
+    'dependencies' => array(
+      array('system', 'jquery'),
+      array('system', 'jquery.once'),
+      array('system', 'drupal'),
+    ),
   );
 
-  return $hooks;
+  return $libraries;
+}
+
+/**
+ * Implements hook_element_info().
+ */
+function views_element_info() {
+  $types['views_collapsible'] = array(
+    '#theme_wrappers' => array('container'),
+    '#process' => array('views_process_collapsible'),
+  );
+  return $types;
+}
+
+/**
+ * Render API callback: Expands a collapsible element into its multiple parts.
+ */
+function views_process_collapsible($element) {
+  $element['#attached']['library'][] = array('views', 'drupal.collapsible');
+  $element['#attributes']['class'][] = 'views-collapsible-container';
+  if (!empty($element['#collapsed'])) {
+    $element['#attributes']['class'][] = 'views-collapsed';
+  }
+  $element['handle'] = array(
+    '#type' => 'container',
+    '#weight' => -10,
+    '#children' => $element['#handle'],
+    '#attributes' => array(
+      'class' => array(
+        'views-collapsible-handle',
+      ),
+    ),
+  );
+  $element['collapse'] = array(
+    '#type' => 'container',
+    '#attributes' => array(
+      'class' => array(
+        'views-collapsible-content',
+      ),
+    ),
+    'content' => $element['collapse'],
+  );
+  return $element;
 }
 
 /**