Collapsible

Collapsible components allow users to toggle the visibility of content sections, providing a simple way to show or hide information on demand.

import {Collapsible} from "@qualcomm-ui/angular/collapsible"

Examples

Showcase

Basic collapsible component with a trigger button that expands and collapses content.

import {Component} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {CollapsibleModule} from "@qualcomm-ui/angular/collapsible"

@Component({
  imports: [CollapsibleModule, ButtonModule],
  selector: "collapsible-showcase-demo",
  template: `
    <div class="flex flex-col items-center" q-collapsible-root>
      <button
        class="my-3"
        emphasis="primary"
        q-button
        q-collapsible-trigger
        variant="fill"
      >
        Toggle
      </button>
      <div q-collapsible-content>
        <div
          class="border-neutral-01 box-border flex h-48 w-72 flex-col rounded-sm border p-4"
        >
          Content
        </div>
      </div>
    </div>
  `,
})
export class CollapsibleShowcaseDemo {}

Controlled State

Control the collapsible's open/closed state using the open and openChanged properties.

Content

import {Component, signal} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {CollapsibleModule} from "@qualcomm-ui/angular/collapsible"

@Component({
  imports: [CollapsibleModule, ButtonModule],
  selector: "collapsible-controlled-demo",
  template: `
    <div
      class="flex flex-col items-center"
      q-collapsible-root
      [open]="open()"
      (openChanged)="open.set($event)"
    >
      <button
        class="my-3"
        emphasis="primary"
        q-button
        q-collapsible-trigger
        variant="fill"
      >
        Toggle
      </button>
      <div q-collapsible-content>
        <div
          class="border-neutral-01 box-border flex h-48 w-72 flex-col rounded-sm border p-4"
        >
          Content
        </div>
      </div>
    </div>
  `,
})
export class CollapsibleControlledDemo {
  readonly open = signal(true)
}

Explorer

Component Anatomy

Hover to highlight, click to view API

root trigger content

API

q-collapsible-root

Prop	Type	Default
defaultOpen The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.	boolean
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
disabled Whether the collapsible is disabled.	boolean
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
open The controlled open state of the collapsible	boolean
(exitCompleted) Function called when the animation ends in the closed state	void
(openChanged) Function called when open changes.	boolean

defaultOpen

Type

boolean

Description

The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Whether the collapsible is disabled.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

open

Type

boolean

Description

The controlled open state of the collapsible

(exitCompleted)

Type

void

Description

Function called when the animation ends in the closed state

(openChanged)

Type

boolean

Description

Function called when open changes.

Attribute / Property	Value
`data-collapsible-part`	'root'
`data-state`	\| 'open' \| 'closed' \| 'closing'

q-collapsible-trigger

Attribute / Property	Value
`data-collapsible-part`	'trigger'
`data-disabled`
`data-state`	\| 'open' \| 'closed' \| 'closing'

data-collapsible-part

Value

'trigger'

data-disabled

Value

data-state

Value

| 'open'
| 'closed'
| 'closing'

q-collapsible-content

Attribute / Property	Value
`class`	'qui-collapsible__content'
`data-collapsible`
`data-collapsible-part`	'content'
`data-disabled`
`data-ssr`
`data-state`	\| 'open' \| 'closed' \| 'closing'
`hidden`	boolean
`style`	CSSProperties

class

Value

'qui-collapsible__content'

data-collapsible

Value

data-collapsible-part

Value

'content'

data-disabled

Value

data-ssr

Value

data-state

Value

| 'open'
| 'closed'
| 'closing'

hidden

Value

boolean

style

Value

CSSProperties

Last updated on Apr 24, 2026 by Olaf Kappes

Checkbox Group

Combobox