Это дубликат https://forum.nwoods.com/t/collapse-a-group-when-another-group-is-expanded/12670/3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expanding only one subgraph at a time</title>
<meta name="description" content="Expanding a subgraph collapses other subgraphs in the same group." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script src="go.js"></script>
<script>
function init() {
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv",
{
"SubGraphExpanded": function(e) {
var groups = e.subject;
groups.each(function(g) {
var container = g.containingGroup;
if (container !== null) {
container.memberParts.each(function(m) {
if (m !== g && m instanceof go.Group) {
m.collapseSubGraph();
}
})
}
});
}
});
myDiagram.groupTemplate =
$(go.Group, go.Panel.Auto,
{ isSubGraphExpanded: false },
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "", function(x) { return go.Brush.randomColor(); })),
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
$("SubGraphExpanderButton"),
$(go.TextBlock,
new go.Binding("text", "key"))),
$(go.Placeholder, { margin: 5 })),
{
layout: $(go.GridLayout,
{ cellSize: new go.Size(1, 1), alignment: go.GridLayout.Position })
});
myDiagram.model.nodeDataArray = [
{ key: "Root", isGroup: true },
{ key: "A", group: "Root", isGroup: true },
{ key: "B", group: "Root", isGroup: true },
{ key: "A1", group: "A", isGroup: true },
{ key: "A2", group: "A", isGroup: true },
{ key: "B1", group: "B", isGroup: true },
{ key: "B2", group: "B", isGroup: true },
{ key: "A11", group: "A1" },
{ key: "A12", group: "A1", isGroup: true },
{ key: "A21", group: "A2" },
{ key: "A22", group: "A2", isGroup: true },
{ key: "B11", group: "B1", isGroup: true },
{ key: "B12", group: "B1", isGroup: true },
{ key: "B21", group: "B2" },
{ key: "B22", group: "B2" },
{ key: "A121", group: "A12" },
{ key: "A122", group: "A12" },
{ key: "A221", group: "A22" },
{ key: "A222", group: "A22" },
{ key: "B111", group: "B11" },
{ key: "B112", group: "B11" },
{ key: "B121", group: "B12" },
{ key: "B122", group: "B12" }
];
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:500px; min-width: 200px"></div>
</body>
</html>