From e0fbd06e104315ddb7c752ee6061c72ef79490c4 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 20 Dec 2025 06:26:53 -0500
Subject: [PATCH] Add CSS animation for node-children collapse/expand

---
 remarkbox/static/css/common.css | 11 +++++++++++
 remarkbox/static/js/custom.js   | 13 +++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/remarkbox/static/css/common.css b/remarkbox/static/css/common.css
index 90c44f0..0a423a5 100644
--- a/remarkbox/static/css/common.css
+++ b/remarkbox/static/css/common.css
@@ -452,6 +452,17 @@ form.node-action {
   }
 }
 
+/* Node children collapse/expand animation */
+[id^="node-children-"] {
+  overflow: hidden;
+  max-height: 10000px;
+  transition: max-height 0.8s ease-out;
+}
+
+[id^="node-children-"].toggle-collapsed {
+  max-height: 0;
+}
+
 .my-namespaces-div {
   display: none;
   position: absolute;
diff --git a/remarkbox/static/js/custom.js b/remarkbox/static/js/custom.js
index 67d4ef5..8003e6f 100644
--- a/remarkbox/static/js/custom.js
+++ b/remarkbox/static/js/custom.js
@@ -46,6 +46,19 @@ function toggle(target, button, off_text, on_text) {
     if (typeof on_text === 'undefined') on_text = 'hide';
     var el = document.getElementById(target);
     var btn = document.getElementById(button);
+
+    // Handle node-children collapse (visible by default, toggle to hide)
+    if (target.indexOf('node-children-') === 0) {
+        if (el.classList.contains('toggle-collapsed')) {
+            el.classList.remove('toggle-collapsed');
+            btn.textContent = on_text;
+        } else {
+            el.classList.add('toggle-collapsed');
+            btn.textContent = off_text;
+        }
+        return;
+    }
+
     if (el.classList.contains('toggle-open')) {
         // Animate close, then update text
         el.classList.add('toggle-closing');