diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index 5739a112de..edaf46162e 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -565,11 +565,12 @@ class OrgChartMobile {
 
 			frappe.run_serially([
 				() => this.get_child_nodes(node.parent_id, node.id),
-				(child_nodes) => this.get_node_group(child_nodes, node.id),
+				(child_nodes) => this.get_node_group(child_nodes, node.parent_id),
 				(node_group) => {
 					node_parent.find('.collapsed-level')
 						.append(node_group);
-				}
+				},
+				() => this.setup_node_group_action()
 			]);
 		}
 	}
@@ -651,7 +652,6 @@ class OrgChartMobile {
 	setup_node_click_action(node) {
 		let me = this;
 		let node_element = $(`#${node.id}`);
-		let node_object = null;
 
 		node_element.click(function() {
 			if (node_element.is(':visible') && node_element.hasClass('active-path')) {
@@ -665,6 +665,15 @@ class OrgChartMobile {
 		});
 	}
 
+	setup_node_group_action() {
+		let me = this;
+
+		$('.node-group').on('click', function() {
+			let parent = $(this).attr('data-parent');
+			me.expand_sibling_group_node(parent);
+		});
+	}
+
 	add_node_to_hierarchy(node) {
 		this.$hierarchy.append(`
 			<li class="level">
@@ -676,7 +685,7 @@ class OrgChartMobile {
 		node.$link.appendTo(this.$hierarchy.find('.level:last'));
 	}
 
-	get_node_group(nodes, sibling) {
+	get_node_group(nodes, parent, collapsed=true) {
 		let limit = 2;
 		const display_nodes = nodes.slice(0, limit);
 		const extra_nodes = nodes.slice(limit);
@@ -700,14 +709,23 @@ class OrgChartMobile {
 			`;
 		}
 
-		const $node_group =
-			$(`<div class="node-group card cursor-pointer" data-sibling=${sibling}>
-				<div class="avatar-group right overlap">
-					${html}
-				</div>
-			</div>`);
+		if (html) {
+			const $node_group =
+				$(`<div class="node-group card cursor-pointer" data-parent=${parent}>
+					<div class="avatar-group right overlap">
+						${html}
+					</div>
+				</div>`);
 
-		return $node_group;
+			if (collapsed)
+				$node_group.addClass('collapsed');
+			else
+				$node_group.addClass('mb-4');
+
+			return $node_group;
+		}
+
+		return null;
 	}
 
 	get_avatar(node) {
@@ -716,6 +734,30 @@ class OrgChartMobile {
 		</span>`
 	}
 
+	expand_sibling_group_node(parent) {
+		let node_object = this.nodes[parent];
+		let node = node_object.$link;
+		node.removeClass('active-child active-path');
+		node_object.expanded = 0;
+		node_object.$children = undefined;
+
+		// show parent's siblings and expand parent node
+		frappe.run_serially([
+			() => this.get_child_nodes(node_object.parent_id, node_object.id),
+			(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
+			(node_group) => {
+				this.$hierarchy.empty().append(node_group) },
+			() => this.setup_node_group_action(),
+			() => {
+				this.$hierarchy.append(`
+					<li class="level"></li>
+				`);
+				this.$hierarchy.append(node);
+				this.expand_node(node_object);
+			}
+		]);
+	}
+
 	remove_levels_after_node(node) {
 		let level = $(`#${node.id}`).parent().parent();
 
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
index 02446be11a..b6d50a0470 100644
--- a/erpnext/public/scss/organizational_chart.scss
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -258,10 +258,10 @@
 	box-shadow: var(--shadow-sm);
 	border-radius: 0.5rem;
 	padding: 0.75rem;
-	margin-left: 12px;
-	width: 5rem;
+	width: 18rem;
 	height: 3rem;
 	overflow: hidden;
+	align-items: center;
 }
 
 .node-group .avatar-group {
@@ -276,4 +276,9 @@
 .node-group .avatar-frame {
 	width: 1.5rem;
 	height: 1.5rem;
+}
+
+.node-group.collapsed {
+	width: 5rem;
+	margin-left: 12px;
 }
\ No newline at end of file