# :CollapsingHeader

<figure><img src="https://1061433021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbNfMkmxWyR6N5SCXKR8U%2Fuploads%2FMoXB80qSzml4c1LGtYk4%2Fimage.png?alt=media&#x26;token=f17f2af0-43b1-4733-8b34-033682b95c96" alt=""><figcaption><p>Preview</p></figcaption></figure>

```typescript
type CollapsingHeader = {
	Title: string,
	CollapseIcon: string?,
	Icon: string?,
	NoAnimation: boolean?,
	Collapsed: boolean?,
	Offset: number?,
	NoArrow: boolean?,
	OpenOnDoubleClick: boolean?, -- Need double-click to open node
	OpenOnArrow: boolean?, -- Only open when clicking on the arrow
	Activated: (CollapsingHeader) -> nil,
	--// Functions
	Remove: (CollapsingHeader) -> nil,
	SetArrowVisible: (CollapsingHeader, Visible: boolean) -> nil,
	SetTitle: (CollapsingHeader, Title: string) -> nil,
	SetIcon: (CollapsingHeader, Icon: string) -> nil,
	SetVisible: (CollapsingHeader, Visible: boolean) -> nil,
	SetCollapsed: (CollapsingHeader, Open: boolean) -> CollapsingHeader
}
```

### Example usage:

<pre class="language-lua"><code class="lang-lua"><strong>local CollapsingHeader = ...:CollapsingHeader() --> Canvas
</strong>
CollapsingHeader:Label({Text="Hello world!"})
</code></pre>

### **Theme colors:**

| Tag                  | Affects          |
| -------------------- | ---------------- |
| TextFont             | Text font        |
| TextSize             | Text size        |
| CollapsingHeaderText | Text color       |
| CollapsingHeaderBg   | Background color |
