Issue #3212033 by mably: Collapsible children items

Closes #3212033

assets/js/tocjs.js

@@ -339,8 +339,28 @@
         currentList.appendChild(li);
         lastLi = li;
       } else if (level > currentLevel) {
-        currentLevel = level;
         const ul = document.createElement(opts.listType);
+        if (currentLevel > 0 && opts.collapsibleItems) {
+          ul.classList.add('collapsible');
+          const expanded = opts.collapsibleExpanded;
+          lastLi.role = 'button';
+          lastLi.tabIndex = 0;
+          lastLi.setAttribute('aria-label', expanded ? 'Collapse' : 'Expand');
+          lastLi.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+          lastLi.addEventListener('click', function toggleCollapse(e) {
+            if (e.target === this) {
+              const isExpanded = this.getAttribute('aria-expanded') === 'true';
+              this.setAttribute('aria-expanded', !isExpanded);
+            }
+          });
+          lastLi.addEventListener('keydown', function toggleCollapse(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault(); // Prevent space from scrolling the page
+              this.click();
+            }
+          });
+        }
+        currentLevel = level;
         ul.level = level;
         ul.appendChild(li);
         lastLi.appendChild(ul);
@@ -670,7 +690,10 @@
     highlightOffset: 0,
     skipInvisibleHeadings: false,
     useHeadingHtml: false,
+    collapsibleItems: false,
+    collapsibleExpanded: true,
     backToTop: false,
+    backToTopLabel: 'Back to top',
     headingFocus: false,
     backToToc: false,
     tocContainer: '',