# Expanding and Collapsing Nodes

## Content



The TreeView control displays a hierarchical list of items. Each tree view node can have a number of child nodes, which are indented below the parent node. Child nodes are displayed when their parent node is expanded and hidden when the node is collapsed.

The TreeView class provides the [ExpandOnClick](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.ExpandOnClick.html) property to expand a single node (parent or child), when you click on any node. The ExpandOnClick method accepts a Boolean value to determine whether the child nodes within a particular node should be expanded or not. Once you set this property to true, it allows you to expand all the child nodes with a mouse click.

In addition, the TreeView class also provides **ExpandOnLoad** property that determines whether to toggle checkboxes when the user clicks the node header. This property accepts Boolean value and by default, it is set to false.

The TreeView control provides [AutoCollapse](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.AutoCollapse.html) property, which automatically closes the sibling nodes of the currently selected parent node. This happens when you click on any other parent node within the same TreeView.

This example uses the **ExpandOnClick** and the **AutoCollapse** method to perform expand and collapse operation on nodes. The below example code uses **Property** model added in the [QuickStart](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/TreeView/TreeViewQuickStart) section.

```html
@using <ApplicationName.Models>
@model Property[]
<c1-tree-view display-member-path="Header" child-items-path="Items"
    source="Model"
    auto-collapse="true"
    expand-on-click="true"></c1-tree-view>
```