Problem
When a book has many nested chapters with folding enabled, there is no way to collapse or expand all chapters at once. Users must click each chapter's fold toggle individually. VSCode's file explorer has a convenient "Collapse All" button for this exact use case, and mdBook would benefit from the same.
Proposed Solution
Add a button in the menu bar that toggles all chapter folds at once, similar to VSCode's collapse-all button.
- Placement: In the menu bar's left-buttons area, to the left of the sidebar toggle (hamburger icon)
- Icons: Use
font-awesome-as-a-crate (already a dependency) — square-minus for collapse all, square-plus for expand all, using the regular (outline) style
- Scope: Only affects top-level foldable chapter items (
ol.chapter > li.chapter-item with a child ol.section), not the "On This Page" heading nav groups
- Visibility: Only shown when
[output.html.fold.enable] is true; auto-hidden when JS is disabled (inherits html:not(.js) .left-buttons button { display: none })
- Behavior: If any foldable chapter is expanded → collapse all; if all are collapsed → expand all. Icon syncs when individual chapter toggles are clicked. The existing 0.5s CSS chevron rotation transition applies automatically.
Files to modify:
| File |
Change |
crates/mdbook-html/front-end/templates/index.hbs |
Add <button> in left-buttons div + <template> elements for FA icons |
crates/mdbook-html/front-end/templates/toc.js.hbs |
Add click handler + icon state sync in connectedCallback() via DOMContentLoaded |
No changes needed in toc.rs or chrome.css — the button is entirely client-side and inherits existing .icon-button and menu bar styles.
Notes
The infrastructure for this is mostly in place — folding already works via the expanded class on li.chapter-item elements, and CSS handles visibility and chevron animation. The main work is adding the button UI and a small JS handler to toggle all items at once.
Problem
When a book has many nested chapters with folding enabled, there is no way to collapse or expand all chapters at once. Users must click each chapter's fold toggle individually. VSCode's file explorer has a convenient "Collapse All" button for this exact use case, and mdBook would benefit from the same.
Proposed Solution
Add a button in the menu bar that toggles all chapter folds at once, similar to VSCode's collapse-all button.
font-awesome-as-a-crate(already a dependency) —square-minusfor collapse all,square-plusfor expand all, using theregular(outline) styleol.chapter > li.chapter-itemwith a childol.section), not the "On This Page" heading nav groups[output.html.fold.enable]istrue; auto-hidden when JS is disabled (inheritshtml:not(.js) .left-buttons button { display: none })Files to modify:
crates/mdbook-html/front-end/templates/index.hbs<button>in left-buttons div +<template>elements for FA iconscrates/mdbook-html/front-end/templates/toc.js.hbsconnectedCallback()viaDOMContentLoadedNo changes needed in
toc.rsorchrome.css— the button is entirely client-side and inherits existing.icon-buttonand menu bar styles.Notes
The infrastructure for this is mostly in place — folding already works via the
expandedclass onli.chapter-itemelements, and CSS handles visibility and chevron animation. The main work is adding the button UI and a small JS handler to toggle all items at once.