MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

Collapse

Collapse panels are utilized to group and conceal complex content areas, enhancing page organization.

The collapse panel component does not come with styles. You must either create your own styles or use it in conjunction with other components.

Usage

Import the component:

import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';

Import the TypeScript type:

import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';

Example:

first content second content
<mdui-collapse>
  <mdui-collapse-item header="first header">first content</mdui-collapse-item>
  <mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>

Examples

Panel Header and Content

You can set the panel header text using the header attribute of the <mdui-collapse-item> component. Alternatively, use the header slot to specify the panel header element. The default slot of the component is for the panel content.

Accordion Mode

To enable accordion mode, add the accordion attribute to the <mdui-collapse> component. In this mode, only one panel can be open at a time.

Setting the Active Panel

The value attribute of the <mdui-collapse> component can be used to get the currently open panel or set the panel you want to open.

In accordion mode, value is a string and can be manipulated using either attribute or property. In non-accordion mode, value is an array and can only be manipulated using JavaScript property.

Disabled State

To disable the entire collapse panel group, add the disabled attribute to the <mdui-collapse> component. To disable a specific collapse panel, add the disabled attribute to the <mdui-collapse-item>.

Triggering Element for Collapse

By default, clicking the entire panel header area triggers the collapse. You can specify the triggering element by using the trigger attribute of the <mdui-collapse-item> component. The trigger attribute can be a CSS selector or a DOM element.

mdui-collapse-item API

Properties

AttributePropertyReflectTypeDefault
valuevaluestring-

Specifies the value of the collapsible panel item.

headerheaderstring-

Sets the header text for the collapsible panel item.

disableddisabledbooleanfalse

Disables the collapsible panel item.

triggertriggerstring | HTMLElement | JQ<HTMLElement>-

Identifies the element that triggers the collapse on click. This can be a CSS selector, a DOM element, or a JQ object. By default, the entire header area is the trigger.

Events

Name
open

Emitted when the collapse item starts to open.

opened

Emitted after the collapse item has opened and the animations are completed.

close

Emitted when the collapse item starts to close.

closed

Emitted after the collapse item has closed and the animations are completed.

Slots

Name
(default)

Main content of the collapsible panel item.

header

Content of the collapsible panel item's header.

CSS Parts

Name
header

Content of the collapsible panel's header.

body

Content of the collapsible panel's body.

mdui-collapse API

Properties

AttributePropertyReflectTypeDefault
accordionaccordionbooleanfalse

Activates accordion mode.

valuevaluestring | string[]-

Specifies the open <mdui-collapse-item> value.

Note: The HTML attribute is always a string and can only be initially set when accordion is true. The JavaScript property value is a string when accordion is true and a string array when accordion is false. To modify this value when accordion is false, you must change the JavaScript property.

disableddisabledbooleanfalse

Disables the collapsible panel.

Events

Name
change

Emitted when the open collapsible panel item changes.

Slots

Name
(default)

The <mdui-collapse-item> components.

On this page