From 83996f56b00db8961a3729d52d86ec47e01e237e Mon Sep 17 00:00:00 2001
From: tupe12334 <ofek.gabay.he@gmail.com>
Date: Wed, 11 Mar 2026 12:53:54 +0300
Subject: [PATCH 1/2] Add collapse all / expand all button for sidebar chapters

Closes #3050
---
 crates/mdbook-html/front-end/css/chrome.css   |  3 ++
 .../mdbook-html/front-end/templates/index.hbs |  8 ++++
 .../front-end/templates/toc.js.hbs            | 37 +++++++++++++++++++
 3 files changed, 48 insertions(+)

diff --git a/crates/mdbook-html/front-end/css/chrome.css b/crates/mdbook-html/front-end/css/chrome.css
index bab38894f4..c54770b7fe 100644
--- a/crates/mdbook-html/front-end/css/chrome.css
+++ b/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;
diff --git a/crates/mdbook-html/front-end/templates/index.hbs b/crates/mdbook-html/front-end/templates/index.hbs
index b1834189f9..88631555d5 100644
--- a/crates/mdbook-html/front-end/templates/index.hbs
+++ b/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) -->
diff --git a/crates/mdbook-html/front-end/templates/toc.js.hbs b/crates/mdbook-html/front-end/templates/toc.js.hbs
index 1a9f751ccf..1244a8ac57 100644
--- a/crates/mdbook-html/front-end/templates/toc.js.hbs
+++ b/crates/mdbook-html/front-end/templates/toc.js.hbs
@@ -72,6 +72,43 @@ 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 than this custom element.
+        const scrollbox = this;
+        const toggles = sidebarAnchorToggles;
+        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() {
+                return Array.from(scrollbox.querySelectorAll('li.chapter-item, li.header-item')).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 header-nav ones added dynamically)
+            Array.from(scrollbox.querySelectorAll('.chapter-fold-toggle')).forEach(el => {
+                el.addEventListener('click', () => setTimeout(updateCollapseAllButton, 0));
+            });
+        });
+        {{/if}}
     }
 }
 window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox);

From aaa5b39ae7714a56f5fae97805af87728738a9de Mon Sep 17 00:00:00 2001
From: tupe12334 <ofek.gabay.he@gmail.com>
Date: Wed, 11 Mar 2026 17:50:34 +0300
Subject: [PATCH 2/2] Fix ESLint errors: trailing spaces, line length, unused
 var

---
 .../front-end/templates/toc.js.hbs            | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/crates/mdbook-html/front-end/templates/toc.js.hbs b/crates/mdbook-html/front-end/templates/toc.js.hbs
index 1244a8ac57..e8cb2ef440 100644
--- a/crates/mdbook-html/front-end/templates/toc.js.hbs
+++ b/crates/mdbook-html/front-end/templates/toc.js.hbs
@@ -72,27 +72,34 @@ class MDBookSidebarScrollbox extends HTMLElement {
         Array.from(sidebarAnchorToggles).forEach(el => {
             el.addEventListener('click', toggleSection);
         });
-        {{#if fold_enable}}
+{{#if fold_enable}}
         // Collapse All / Expand All button
-        // Deferred to DOMContentLoaded because the button and icon <template>
-        // elements appear later in the HTML body than this custom element.
+        // Deferred to DOMContentLoaded because the button and icon
+        // <template> elements appear later in the HTML body.
         const scrollbox = this;
-        const toggles = sidebarAnchorToggles;
         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;
+            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() {
-                return Array.from(scrollbox.querySelectorAll('li.chapter-item, li.header-item')).filter(li => li.querySelector(':scope > ol.section'));
+                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;
+                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'));
+                const anyExpanded = foldable.some(
+                    li => li.classList.contains('expanded'));
                 foldable.forEach(li => {
                     if (anyExpanded) {
                         li.classList.remove('expanded');
@@ -103,12 +110,16 @@ class MDBookSidebarScrollbox extends HTMLElement {
                 updateCollapseAllButton();
             });
             updateCollapseAllButton();
-            // Hook all fold toggles (including header-nav ones added dynamically)
-            Array.from(scrollbox.querySelectorAll('.chapter-fold-toggle')).forEach(el => {
-                el.addEventListener('click', () => setTimeout(updateCollapseAllButton, 0));
+            // 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}}
+{{/if}}
     }
 }
 window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox);