OrgChart JS Documentation

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 but expand 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 but expand 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. Using tags

By default all nodes are expanded, if you want to collapse specific node or all nodes you can set a tag for them.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            "hide": {
                state: BALKANGraph.COLLAPSE
            }
        },
        ....
        nodes: [
            { id: "1", name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg" },
            { id: "2", tags: ["hide"], name: "Ava Field", title: "IT Manager", img: "//balkangraph.com/js/img/2.jpg" },
            { id: "3", name: "Rhys Harper", title: "Marketing Team Lead", img: "//balkangraph.com/js/img/3.jpg" }
            ...
        ]
    });    
    

All nodes with tag "hide" will be collapsed by default, you can change the tag name "hide" to something else. The state option could be BALKANGraph.COLLAPSE or BALKANGraph.EXPAND.

Here is the result:

3. Expand/Collpase on node click event

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

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeMouseClickBehaviour: BALKANGraph.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",
        ...
    });    
    

4. onExpCollClick event

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