Collapsible

• Docs
• API

Tag name: <vscode-collapsible>

Allows users to reveal or hide related content on a page.

Properties

alwaysShowHeaderActionsreflects

Name	alwaysShowHeaderActions
Attribute	always-show-header-actions
Type	boolean
Default	false
Description	When enabled, header actions are always visible; otherwise, they appear only when the cursor hovers over the component. Actions are shown only when the Collapsible component is open. This property is designed to use the workbench.view.alwaysShowHeaderActions setting.

description

Name	description
Attribute	description
Type	string
Default	''
Description	Less prominent text in the header.

heading

Name	heading
Attribute	heading
Type	string
Default	''
Description	Heading text.

openreflects

Name	open
Attribute	open
Type	boolean
Default	false

titledeprecated

Name	title
Attribute	title
Type	string
Default	''
Description	Deprecation warning! The title is a global HTML attribute and will unintentionally trigger a native tooltip on the component. Use the heading property instead. Component heading text

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

Events

vsc-collapsible-toggle

Name	vsc-collapsible-toggle
Type	VscCollapsibleToggleEvent
Description	Dispatched when the content visibility is changed.

Slots

default/unnamed

Description	Main content.

actions

Description	You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.

decorations

Description	The elements placed in the decorations slot are always visible.

CSS Custom Properties

--vscode-focusBorder

Name	--vscode-focusBorder
Default value	#0078d4
Description	Focus border color

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif
Description	Header font family

--vscode-icon-foreground

Name	--vscode-icon-foreground
Default value	#cccccc
Description	Arrow icon color

--vscode-sideBar-background

Name	--vscode-sideBar-background
Default value	#181818
Description	Background color

--vscode-sideBarSectionHeader-background

Name	--vscode-sideBarSectionHeader-background
Default value	#181818
Description	Header background

--vscode-sideBarTitle-foreground

Name	--vscode-sideBarTitle-foreground
Default value	#cccccc
Description	Header font color

CSS Parts

body

Description	Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.