craftcms · brandonkelly · Jun 19, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -17,6 +17,7 @@
 - Improved the wording of validation errors caused by relational fields’ “Validate related [type]” settings. ([#9960](https://github.com/craftcms/cms/discussions/9960))
 - URL chips within Link fields are now truncated if wider than the container, and have a “Copy URL” action. ([#17339](https://github.com/craftcms/cms/pull/17339))
 - Users with “Moderate users” permission can now send activation emails. ([#17362](https://github.com/craftcms/cms/pull/17362))
+- Source headings within element indexes are now collapsible. ([#17226](https://github.com/craftcms/cms/pull/17226))
 - Element condition builders now show condition rules for custom fields with duplicate names. ([#17361](https://github.com/craftcms/cms/pull/17361))
 
 ### Administration

diff --git a/src/controllers/ElementIndexSettingsController.php b/src/controllers/ElementIndexSettingsController.php
@@ -243,7 +243,7 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
         // Get the old source configs
         $projectConfig = Craft::$app->getProjectConfig();
         $oldSourceConfigs = $projectConfig->get(ProjectConfig::PATH_ELEMENT_SOURCES . ".$elementType") ?? [];
-        $oldSourceConfigs = ArrayHelper::index(array_filter($oldSourceConfigs, fn($s) => $s['type'] !== ElementSources::TYPE_HEADING), 'key');
+        $oldSourceConfigs = ArrayHelper::index($oldSourceConfigs, 'key');
 
         $conditionsService = Craft::$app->getConditions();
 
@@ -254,22 +254,26 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
 
         // Normalize to the way it's stored in the DB
         foreach ($sourceOrder as $source) {
-            if (isset($source['heading'])) {
-                $newSourceConfigs[] = [
-                    'type' => ElementSources::TYPE_HEADING,
-                    'heading' => $source['heading'],
-                ];
-            } elseif (isset($source['key'])) {
-                $isCustom = str_starts_with($source['key'], 'custom:');
+            if (isset($source['key'])) {
+                $type = match (true) {
+                    str_starts_with($source['key'], 'custom:') => ElementSources::TYPE_CUSTOM,
+                    str_starts_with($source['key'], 'heading:') => ElementSources::TYPE_HEADING,
+                    default => ElementSources::TYPE_NATIVE,
+                };
+
+                $isCustom = $type === ElementSources::TYPE_CUSTOM;
                 $sourceConfig = [
-                    'type' => $isCustom ? ElementSources::TYPE_CUSTOM : ElementSources::TYPE_NATIVE,
+                    'type' => $type,
                     'key' => $source['key'],
                 ];
 
                 // Were new settings posted?
                 if (isset($sourceSettings[$source['key']])) {
                     $postedSettings = $sourceSettings[$source['key']];
-                    $sourceConfig['tableAttributes'] = array_values(array_filter($postedSettings['tableAttributes'] ?? [])) ?: '-';
+
+                    if ($type !== ElementSources::TYPE_HEADING) {
+                        $sourceConfig['tableAttributes'] = array_values(array_filter($postedSettings['tableAttributes'] ?? [])) ?: '-';
+                    }
 
                     if (isset($postedSettings['defaultSort'])) {
                         $sourceConfig['defaultSort'] = $postedSettings['defaultSort'];
@@ -292,6 +296,8 @@ public function actionSaveCustomizeSourcesModalSettings(): Response
                         if (isset($postedSettings['userGroups']) && $postedSettings['userGroups'] !== '*') {
                             $sourceConfig['userGroups'] = is_array($postedSettings['userGroups']) ? $postedSettings['userGroups'] : false;
                         }
+                    } elseif ($type === ElementSources::TYPE_HEADING) {
+                        $sourceConfig['heading'] = $postedSettings['heading'];
                     } elseif (isset($postedSettings['enabled'])) {
                         $sourceConfig['disabled'] = !$postedSettings['enabled'];
                         if ($sourceConfig['disabled']) {

diff --git a/src/templates/_elements/sources.twig b/src/templates/_elements/sources.twig
@@ -83,29 +83,73 @@
 
 {% tag 'ul' with {
     class: keyPrefix ? 'nested' : null,
+    id: id ?? ''
 } %}
     {% for source in sources %}
         {% if (source.type ?? null) == 'heading' %}
+            {% set key = source.key ?? source.heading | kebab %}
             {% if nestedUnderHeading %}
                     </ul>
                 </li>
             {% endif %}
             <li class="heading">
-                <span>{{ source.heading|t('site') }}</span>
-                <ul>
+                <div class="source-item source-item--heading">
+                    <span class="type-heading-small">{{ source.heading|t('site') }}</span>
+                    {# Don't toggle blank headings #}
+                    {% if source.heading | length %}
+                        {% embed '_includes/disclosure-toggle' with {
+                            cookieName: 'sources-list:'~ key,
+                            controls: key,
+                            attributes: {
+                                class: 'source-item__toggle'
+                            }
+                        } %}
+                            {% block content %}
+                                <span class="cp-icon puny">
+                                    {{ iconSvg('angle-down') }}
+                                </span>
+                                <span class="visually-hidden">{{ 'Expand {heading} sources' | t('app', {
+                                        heading: source.heading
+                                    }) }}</span>
+                            {% endblock %}
+                        {% endembed %}
+                    {% endif %}
+                </div>
+                <ul id="{{ key }}">
             {% set nestedUnderHeading = true %}
         {% elseif (source.sites ?? null) is not same as([]) %}
             {% set key = source.keyPath ?? (keyPrefix ~ source.key) %}
             {% tag 'li' with {
                 class: [
+                    (source.nested ?? false) ? 'collapsible' : null,
                     (source.disabled ?? false) ? 'hidden' : null,
                 ]|filter,
             } %}
-                {{ _self.sourceLink(key, source, isTopLevel, elementType, sortOptions ?? null, baseSortOptions ?? null, tableColumns ?? null, defaultTableColumns ?? null, viewModes ?? null) }}
+                <div class="source-item source-item--link">
+                    {{ _self.sourceLink(key, source, isTopLevel, elementType, sortOptions ?? null, baseSortOptions ?? null, tableColumns ?? null, defaultTableColumns ?? null, viewModes ?? null) }}
+                    {% if source.nested is defined and source.nested is not empty %}
+                        {% embed '_includes/disclosure-toggle' with {
+                            cookieName: 'sources-list:'~ key,
+                            controls: key,
+                            attributes: {
+                                class: 'source-item__toggle'
+                            }
+                        } %}
+                            {% block content %}
+                                <span class="cp-icon puny">
+                                    {{ iconSvg('angle-down') }}
+                                </span>
+                                <span class="visually-hidden">{{ 'Expand {heading} sources' | t('app', {
+                                        heading: source.label
+                                    }) }}</span>
+                            {% endblock %}
+                        {% endembed %}
+                    {% endif %}
+                </div>
                 {% if source.nested is defined and source.nested is not empty %}
-                    <button class="toggle" aria-expanded="false" aria-label="{{ 'Show nested sources'|t('app') }}"></button>
                     {% include "_elements/sources" with {
                         keyPrefix: key ~ '/',
+                        id: key,
                         sources: source.nested
                     } %}
                 {% endif %}

diff --git a/src/translations/en/app.php b/src/translations/en/app.php
@@ -695,6 +695,7 @@
     'Everything in {edition}, plus…' => 'Everything in {edition}, plus…',
     'Existing {type}' => 'Existing {type}',
     'Expand all blocks' => 'Expand all blocks',
+    'Expand {heading} sources' => 'Expand {heading} sources',
     'Expand' => 'Expand',
     'Expanded' => 'Expanded',
     'Expired' => 'Expired',

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -1624,6 +1624,46 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
+%type-heading-small {
+  text-transform: uppercase;
+  color: var(--medium-text-color);
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.source-item {
+  --source-item-toggle-size: calc(20rem / 16);
+  position: relative;
+
+  // Toggle button
+  .source-item__toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    width: var(--source-item-toggle-size);
+    height: var(--source-item-toggle-size);
+    z-index: 1;
+    color: inherit;
+  }
+
+  &:has(.sel) {
+    --icon-color: var(--white);
+  }
+}
+
+.source-item--heading {
+  margin-block-end: var(--s);
+}
+
+.source-item--heading {
+  @extend %type-heading-small;
+}
+
 /* Sidebar */
 .sidebar {
   width: $sidebarWidth;
@@ -1639,38 +1679,38 @@ li.breadcrumb-toggle-wrapper {
   .heading {
     position: relative;
     margin-block: 0;
-    margin-inline: var(--xl);
+    line-height: 1.2;
 
     &:not(:first-child) {
       margin-block-start: var(--m);
     }
 
+    .type-heading-small,
     & > span {
+      // Backwards compatibility
+      @extend %type-heading-small;
       display: inline-block;
       position: relative;
       z-index: 1;
       padding-block: 0;
-      padding-inline: 5px;
+      padding-inline: var(--xl) var(--m);
       margin-block: 0;
-      margin-inline: -5px;
-      text-transform: uppercase;
-      color: var(--medium-text-color);
-      font-size: 11px;
-      font-weight: bold;
     }
 
     & > ul {
-      margin-block: 2px;
-      margin-inline: calc(var(--xl) * -1);
+      margin-block: var(--xs) 2px;
     }
   }
 
   @mixin nav-level($level) {
-    & > a {
+    & > a,
+    .type-heading-small,
+    [data-source-item] {
       padding-inline-start: 24px + 14 * $level;
     }
 
-    & > .toggle {
+    & > .toggle,
+    [aria-controls] {
       inset-inline-start: calc(var(--m) * #{$level});
     }
   }
@@ -1705,7 +1745,8 @@ li.breadcrumb-toggle-wrapper {
     li {
       position: relative;
 
-      &:not(.has-subnav) > a {
+      &:not(.has-subnav) > a,
+      &:not(.has-subnav) [data-source-item] {
         &:not(.sel):hover {
           text-decoration: none;
         }
@@ -1737,7 +1778,7 @@ li.breadcrumb-toggle-wrapper {
         flex-direction: row;
         align-items: center;
         padding-block: 7px;
-        padding-inline: var(--xl);
+        padding-inline: var(--xl) var(--m);
         min-height: var(--xl);
         box-sizing: border-box;
         color: var(--text-color);
@@ -1818,14 +1859,26 @@ li.breadcrumb-toggle-wrapper {
         justify-content: center;
       }
 
-      ul {
+      ul:not([data-state]) {
         display: none;
       }
 
+      ul[data-state='collapsed'] {
+        display: none;
+      }
+
+      ul[data-state='expanded'] {
+        display: block;
+      }
+
       &.heading,
       &.expanded {
         & > ul {
           display: block;
+
+          &[data-state='collapsed'] a:not(.sel) {
+            display: none;
+          }
         }
       }
     }

diff --git a/src/web/assets/cp/src/css/_craft-disclosure.scss b/src/web/assets/cp/src/css/_craft-disclosure.scss
@@ -0,0 +1,9 @@
+craft-disclosure {
+  [aria-expanded='true'] .cp-icon {
+    transform: rotate(180deg);
+  }
+
+  [aria-expanded='false'] .cp-icon {
+    transform: rotate(0deg);
+  }
+}
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -1109,6 +1109,7 @@ a.fieldtoggle::before {
 }
 
 .toggle.expanded::before,
+.toggle[aria-expanded='true']::before,
 button.fieldtoggle:not(.lightswitch).expanded::before,
 a.fieldtoggle.expanded::before,
 .sidebar nav li.expanded > .toggle::before,

diff --git a/src/web/assets/cp/src/css/craft.scss b/src/web/assets/cp/src/css/craft.scss
@@ -6,6 +6,7 @@
 @use 'cp';
 @use 'range';
 @use 'global-sidebar';
+@use 'craft-disclosure';
 @use 'craft-spinner';
 @use 'craft-tooltip';
 @use 'preview';

diff --git a/src/web/assets/cp/src/js/BaseElementIndex.js b/src/web/assets/cp/src/js/BaseElementIndex.js
@@ -1791,7 +1791,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
           : Craft.t('app', 'Descending');
       const sortLabel = this.getSortLabel(attribute);
 
-      if (!attribute && !direction && !sortLabel) return;
+      if (!attribute && !direction && !sortLabel) {
+        return;
+      }
 
       return Craft.t('app', '{name} sorted by {attribute}, {direction}', {
         name: this.getSourceLabel(),
@@ -1801,7 +1803,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     },
 
     updateLiveRegion: function (message) {
-      if (!message) return;
+      if (!message) {
+        return;
+      }
 
       this.$srStatusContainer.empty().text(message);
 
@@ -1810,7 +1814,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         const currentMessage = this.$srStatusContainer.text();
 
         // Check that this is the same message and hasn't been updated since
-        if (message !== currentMessage) return;
+        if (message !== currentMessage) {
+          return;
+        }
 
         this.$srStatusContainer.empty();
       }, 5000);
@@ -3160,9 +3166,11 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     // -------------------------------------------------------------------------
 
     _getSourcesInList: function ($list, topLevel) {
-      let $sources = $list.find('> li:not(.heading) > a');
+      let $sources = $list.find('> li:not(.heading) [data-source-item]');
       if (topLevel) {
-        $sources = $sources.add($list.find('> li.heading > ul > li > a'));
+        $sources = $sources.add(
+          $list.find('> li.heading > ul > li [data-source-item]')
+        );
       }
       return $sources;
     },
@@ -3965,6 +3973,7 @@ const SourceNav = Garnish.Base.extend(
     $container: null,
     $items: null,
     $selectedItem: null,
+    $disclosures: null,
 
     init: function (container, settings) {
       this.$container = $(container);