Add "collapse/expand" functionality

assets/html/js/collapse.js

@@ -0,0 +1,55 @@
+// libraries: jquery
+// arguments: $
+
+var isExpanded = true;
+
+$(document).on("click", ".docstring header", function () {
+  let articleToggleTitle = "Expand article";
+
+  if ($(this).siblings("section").is(":visible")) {
+    $(this)
+      .find(".docstring-article-toggle-button")
+      .removeClass("fa-chevron-down")
+      .addClass("fa-chevron-right");
+  } else {
+    $(this)
+      .find(".docstring-article-toggle-button")
+      .removeClass("fa-chevron-right")
+      .addClass("fa-chevron-down");
+
+    articleToggleTitle = "Collapse article";
+  }
+
+  $(this).find(".docstring-article-toggle-button").prop("title", articleToggleTitle);
+  $(this).siblings("section").slideToggle();
+});
+
+$(document).on("click", ".docs-article-toggle-button", function () {
+  let articleToggleTitle = "Expand article";
+  let navArticleToggleTitle = "Expand all Articles";
+
+  if (isExpanded) {
+    $(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
+    $(".docstring-article-toggle-button")
+      .removeClass("fa-chevron-down")
+      .addClass("fa-chevron-right");
+
+    isExpanded = false;
+
+    $(".docstring section").slideUp();
+  } else {
+    $(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
+    $(".docstring-article-toggle-button")
+      .removeClass("fa-chevron-right")
+      .addClass("fa-chevron-down");
+
+    isExpanded = true;
+    articleToggleTitle = "Collapse article";
+    navArticleToggleTitle = "Collapse all Articles";
+
+    $(".docstring section").slideDown();
+  }
+
+  $(this).prop("title", navArticleToggleTitle);
+  $(".docstring-article-toggle-button").prop("title", articleToggleTitle);
+});

assets/html/scss/documenter/components/_docstring.scss

@@ -7,6 +7,7 @@
   max-width: 100%;
 
   > header {
+    cursor: pointer;
     display: flex;
     flex-grow: 1;
     align-items: stretch;
@@ -21,6 +22,10 @@
       background-color: transparent;
     }
 
+    .docstring-article-toggle-button {
+      padding: 0.2rem 0.2rem 0.2rem 0;
+    }
+
     .docstring-binding {
       margin-right: 0.3em;
     }

assets/html/scss/documenter/layout/_main.scss

@@ -70,6 +70,8 @@
           display: inline-block;
         }
         white-space: nowrap;
+        gap: 1rem;
+        align-items: center;
         .docs-label {
           padding: 0;
           margin-left: 0.3em;

src/html/HTMLWriter.jl

@@ -1225,6 +1225,12 @@ function render_navbar(ctx, navnode, edit_page_link::Bool)
         :href => "#", :title => "Settings",
     ])
 
+    # Collapse/Expand All articles toggle
+    push!(navbar_right.nodes, a[
+        "#documenter-article-toggle-button.docs-article-toggle-button.fa-solid.fa-chevron-up",
+        :href=>"javascript:;", :title=>"Collapse all Articles",
+    ])
+
     # Construct the main <header> node that should be the first element in div.docs-main
     header[".docs-navbar"](navbar_left, breadcrumb, navbar_right)
 end
@@ -1623,6 +1629,7 @@ function domify(dctx::DCtx, mdast_node::Node, node::Documenter.DocsNode)
 
     article[".docstring"](
         header(
+            a[".docstring-article-toggle-button.fa-solid.fa-chevron-down", :href=>"javascript:;", :title=>"Collapse article"],
             a[".docstring-binding", :id=>node.anchor.id, :href=>"#$(node.anchor.id)"](code("$(node.object.binding)")),
             " — ", # &mdash;
             span[".docstring-category"]("$(Documenter.doccat(node.object))")