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>';
    

5. Expand Up

Using the Up level functionality you can expand one level up.

The functionality is available when you have defined roots in the chart definition.

 
var chart = new OrgChart(document.getElementById("tree"), {

        roots: [3],
        nodes: [
            { id: 1 },
            { id: 2, pid: 1 },
            { id: 3, pid: 1 },
            { id: 4, pid: 1 },
            { id: 5, pid: 3 },
            { id: 6, pid: 3 },
        ]
    });
    

You can remove the Up level functionality by setting the Up field to empty string:

 
    OrgChart.templates.ana.up = "";

Or you can change it. This is the Up field definition:

 
    OrgChart.templates.ana.up = '<rect x="20" y="-25" width="30" height="17" fill="#aeaeae" rx="3" ry="3"></rect><line x1="35" x2="35" y1="0" y2="-8" stroke="#aeaeae" stroke-width="1"></line>';