diff --git a/assets/css/datagrid.css b/assets/css/datagrid.css
index 660ed2de..c1920d39 100644
--- a/assets/css/datagrid.css
+++ b/assets/css/datagrid.css
@@ -435,7 +435,7 @@
 	margin-top: -9px
 }
 
-[data-datagrid-name] .datagrid-tree .datagrid-tree-item.has-children > .datagrid-tree-item-children {
+[data-datagrid-name] .datagrid-tree .datagrid-tree-item.has-children > .datagrid-tree-item-children:not(.showed) {
 	display: none
 }
 
diff --git a/assets/plugins/features/treeView.ts b/assets/plugins/features/treeView.ts
index 3171dfa8..ea782ad0 100644
--- a/assets/plugins/features/treeView.ts
+++ b/assets/plugins/features/treeView.ts
@@ -9,9 +9,18 @@ export class TreeViewPlugin implements DatagridPlugin {
 		datagrid.ajax.addEventListener("success", ({detail: {payload}}) => {
 			if (payload._datagrid_tree) {
 				const id = payload._datagrid_tree;
+				const rowBlock = document.querySelector(`.datagrid-tree-item[data-id="${id}"]`);
 				const childrenBlock = document.querySelector(`.datagrid-tree-item[data-id="${id}"] .datagrid-tree-item-children`);
 				if (childrenBlock) {
-					childrenBlock.classList.add('loaded');
+					if (childrenBlock.classList.contains('showed')) {
+						childrenBlock.innerHTML = '';
+						childrenBlock.classList.remove('showed');
+						rowBlock.querySelector(`a.chevron`).style.transform = "rotate(0deg)";
+						return;
+					}
+
+					childrenBlock.classList.add('showed');
+					rowBlock.querySelector(`a.chevron`).style.transform = "rotate(90deg)";
 					const snippets = payload.snippets;
 					for (const snippetName in snippets) {
 						const snippet = snippets[snippetName];