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.
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>
Code
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>
Code
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.
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>
Code
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>
Code
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-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>
Code| 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> | - |
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.
|
| 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 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.
|
disabled | disabled | | boolean | false |
Disables the collapsible panel.
|
| Name |
|---|
change |
Emitted when the open collapsible panel item changes.
|
| Name |
|---|
| (default) |
The <mdui-collapse-item> components.
|