Collapse
Collapse panels are used to group and hide complex content areas, improving page organization.
The collapse component does not include default styles. You must either create your own styles or use it alongside other components.
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>
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.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
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.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
The value attribute of the <mdui-collapse> component can be used to get or set the currently open panel.
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.
Accordion Mode
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Non-Accordion Mode
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>Accordion Mode</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Non-Accordion Mode</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
Source
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>.
All Disabled
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Disable the First Panel
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>All Disabled</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Disable the First Panel</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
By default, clicking the entire panel header area triggers the collapse. You can specify a different trigger element using the trigger attribute of the <mdui-collapse-item> component. The trigger attribute can be a CSS selector or a DOM element.
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Item 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source| Attribute | Property | Reflect | Type | Default |
|---|
value | value | | string | - |
Specifies the value of the collapsible panel item.
|
Sets the header text for the collapsible panel item.
|
disabled | disabled | | boolean | false |
Disables the collapsible panel item.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
The element that toggles 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.
|
| 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.
|
| Name |
|---|
| (default) |
Main content of the collapsible panel item.
|
Content of the collapsible panel item's header.
|
| Name |
|---|
Content of the collapsible panel's header.
|
body |
Content of the collapsible panel's body.
|
| Attribute | Property | Reflect | Type | Default |
|---|
accordion | accordion | | boolean | false |
Activates accordion mode.
|
value | value | | string | string[] | - |
Specifies the open <mdui-collapse-item> value.
Note: The HTML attribute is always a string and can only be set initially when accordion is true. The JavaScript property is a string when accordion is true and a string array when accordion is false. To change this value when accordion is false, update the JavaScript property.
|
disabled | disabled | | boolean | false |
Disables the collapsible panel.
|
| Name |
|---|
change |
Emitted when the currently open collapsible item changes.
|
| Name |
|---|
| (default) |
The <mdui-collapse-item> components.
|
