Collapse a group when another group is expanded

GoJS
1

I have created a group. if i click to expand a group, I need to check if any groups are already expanded and if so, i need to collapse that group and expand the clicked group. Awaiting your reply…

2

Do you want to collapse all other groups, or groups on the same level, or do you only have top level groups?

3

In case you wanted an example of collapsing all other groups that are siblings of the group being expanded, here you go:

<!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>

So for example if you have this situation:
image
And you then expand the “A1” group, you get this result:
image