Expand/Collapse

You can specify expand/collapse state by setting expand/collapse options.

Expand and Collapse options

Collapse

To initially collapse the chart to the second level, add this in the configuration:

collapse={{
    level: 2
}}

Collpase

Collpase all children

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 collapse the chart to the second level and all children of the second level:

collapse: {
    level: 2,
    allChildren: true
}

Collpase All Children

Collpase all children except nodes

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 collapse the chart to the second level and all children of the second level, except node with id "4":

collapse={{
    level: 2,
    allChildren: true
}}
expand={{
    nodes: [4]
}}

Collpase All Children Ecxept

Collpase all children except nodes with all chilren expanded

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

collapse={{
    level: 2,
    allChildren: true
}}
expand={{
    nodes: [4],
    allChildren: true
}}

Collpase All Children Ecxept Nodes with all children expanded

Expand/Collapse programmatically

Importing OrgChartJS you can use its methods to collpase/expand programmatically:

You can use the following methods: expand, collapse, expandCollapse

To expand all children to the leaf under a specific node, you need to iterate the nodes.

Expand/Collapse on node click event

To expand or collapse on node click set nodeMouseClick to OrgChart.action.expandCollapse:

nodeMouseClick={OrgChartJS.action.expandCollapse}

Expand / Collpase on node click

Collpase All Programmatically

How to iterate and collapse all nodes and then expand by level:

Collpase All

onExpandCollpaseButtonClick event

To define custom expand/collapse logic use onExpandCollpaseButtonClick event.

Collapse all on minus button click

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 configuration:

roots={[3]}

Expand Up