OrgChartJS Docs

Expand/Collapse

You can specify expand/collapse state by setting expand/collapse options or using tags.

1. Expand and Collapse options

Here is an example how to collpase the chart to the second level:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2
            },
            ...
        });
    

In the example above if you click the expand button of node with id "2" all children will be expanded.

---

Here is an example how to collpase the chart to the second level and all children of the second level:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            ...
        });
    

In the example above if you click the expand button of node with id "2" only the children from the third level will be expanded.

---

Here is an example how to collpase the chart to the second level and all children of the second level, except node with id "4":

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand: {
                nodes: [4]
            }
            ...
        });
    

---

Here is an example how to collpase the chart to the second level and all children of the second level, except node with id "4" and its children:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand: {
                nodes: [4],
                allChildren: true
            }
            ...
        });
    

2. Expand/Collpase on node click event

To expand or collapse on node click set nodeMouseClick to OrgChart.action.expandCollapse. Here is an example

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeMouseClick: OrgChart.action.expandCollapse,
        ...
    });    

In some cases you might not need the expand/collapse button, to hide it you will need to override the template. In the demo bellow all nodes are collapsed:

 
    OrgChart.templates.ana.plus = "";        
    OrgChart.templates.ana.minus = "";
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        ...
    });    
    

3. onExpCollClick event

To define custom expand/collpase logic use onExpCollClick event. Here is a demo that you can use to get started.

4. Number of collapsed nodes

To display the number of collapsed nodes change the template as follows:

 
    OrgChart.templates.olivia.plus = '<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
        + '<text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{collapsed-children-count}</text>';