Add collapse all / expand all button for sidebar chapters

crates/mdbook-html/front-end/css/chrome.css

@@ -94,6 +94,9 @@ html.sidebar-visible #mdbook-menu-bar {
 html:not(.js) .left-buttons button {
     display: none;
 }
+#mdbook-sidebar-toggle-anchor:not(:checked) ~ .page-wrapper #mdbook-collapse-all {
+    display: none;
+}
 
 .menu-title {
     display: inline-block;

crates/mdbook-html/front-end/templates/index.hbs

@@ -143,6 +143,10 @@
                 <div id="mdbook-menu-bar-hover-placeholder"></div>
                 <div id="mdbook-menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">
+                        {{#if fold_enable}}
+                        <button id="mdbook-collapse-all" class="icon-button" type="button" title="Collapse/Expand all chapters" aria-label="Collapse/Expand all chapters">
+                        </button>
+                        {{/if}}
                         <label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
                             {{fa "solid" "bars"}}
                         </label>
@@ -274,6 +278,10 @@
         <template id=fa-copy>{{fa "regular" "copy"}}</template>
         <template id=fa-play>{{fa "solid" "play"}}</template>
         <template id=fa-clock-rotate-left>{{fa "solid" "clock-rotate-left"}}</template>
+        {{#if fold_enable}}
+        <template id=fa-square-minus>{{fa "regular" "square-minus"}}</template>
+        <template id=fa-square-plus>{{fa "regular" "square-plus"}}</template>
+        {{/if}}
 
         {{#if live_reload_endpoint}}
         <!-- Livereload script (if served using the cli tool) -->

crates/mdbook-html/front-end/templates/toc.js.hbs

@@ -72,6 +72,54 @@ class MDBookSidebarScrollbox extends HTMLElement {
         Array.from(sidebarAnchorToggles).forEach(el => {
             el.addEventListener('click', toggleSection);
         });
+{{#if fold_enable}}
+        // Collapse All / Expand All button
+        // Deferred to DOMContentLoaded because the button and icon
+        // <template> elements appear later in the HTML body.
+        const scrollbox = this;
+        document.addEventListener('DOMContentLoaded', () => {
+            const collapseAllBtn =
+                document.getElementById('mdbook-collapse-all');
+            const collapseIconHTML =
+                document.getElementById('fa-square-minus').innerHTML;
+            const expandIconHTML =
+                document.getElementById('fa-square-plus').innerHTML;
+            function getFoldableItems() {
+                const selector = 'li.chapter-item, li.header-item';
+                return Array.from(scrollbox.querySelectorAll(selector))
+                    .filter(li => li.querySelector(':scope > ol.section'));
+            }
+            function updateCollapseAllButton() {
+                const foldable = getFoldableItems();
+                const anyExpanded = foldable.some(
+                    li => li.classList.contains('expanded'));
+                collapseAllBtn.innerHTML = anyExpanded
+                    ? collapseIconHTML : expandIconHTML;
+            }
+            collapseAllBtn.addEventListener('click', () => {
+                const foldable = getFoldableItems();
+                const anyExpanded = foldable.some(
+                    li => li.classList.contains('expanded'));
+                foldable.forEach(li => {
+                    if (anyExpanded) {
+                        li.classList.remove('expanded');
+                    } else {
+                        li.classList.add('expanded');
+                    }
+                });
+                updateCollapseAllButton();
+            });
+            updateCollapseAllButton();
+            // Hook all fold toggles (including dynamically added ones)
+            const allToggles =
+                scrollbox.querySelectorAll('.chapter-fold-toggle');
+            Array.from(allToggles).forEach(el => {
+                el.addEventListener('click', () => {
+                    setTimeout(updateCollapseAllButton, 0);
+                });
+            });
+        });
+{{/if}}
     }
 }
 window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox);