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);