From 12fd5a88b68f05197d0606a9bbadf2b033fb8499 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Mon, 20 Apr 2026 09:35:53 +0300
Subject: [PATCH] add toggle children button to nodes

---
 public/js/text.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/js/text.js b/public/js/text.js
index f017bd4..0388bf6 100644
--- a/public/js/text.js
+++ b/public/js/text.js
@@ -43,7 +43,7 @@ function buildTree(nodes) {
     return roots;
 }
 
-function renderTree(nodes, textId) {
+function renderTree(nodes, textId, depth = 0) {
     const ul = document.createElement('ul');
     nodes.forEach(node => {
         const li = document.createElement('li');
@@ -61,11 +61,28 @@ function renderTree(nodes, textId) {
         const bulkBtn = document.createElement('button');
         bulkBtn.textContent = 'Bulk add children';
         bulkBtn.className = 'bulk-add-children';
-        bulkBtn.addEventListener('click', () => toggleBulkAddForm(li, node.id, textId));
+        bulkBtn.addEventListener(
+            'click',
+            () => toggleBulkAddForm(li, node.id, textId)
+        );
         li.appendChild(bulkBtn);
 
         if (node.children.length > 0) {
-            li.appendChild(renderTree(node.children, textId));
+            const childUl = renderTree(node.children, textId, depth + 1);
+            const childrenVisible = depth === 0;
+            childUl.style.display = childrenVisible ? '' : 'none';
+
+            const toggleBtn = document.createElement('button');
+            toggleBtn.className = 'toggle-children';
+            toggleBtn.textContent = childrenVisible ? '▼' : '▶';
+            toggleBtn.addEventListener('click', () => {
+                const isHidden = childUl.style.display === 'none';
+                childUl.style.display = isHidden ? '' : 'none';
+                toggleBtn.textContent = isHidden ? '▼' : '▶';
+            });
+
+            li.appendChild(toggleBtn);
+            li.appendChild(childUl);
         }
 
         ul.appendChild(li);