<exmg-collapsed>

Collapsed element contains a slot that can be expanded or collapsed to reveal additional content or information.

Demo

Installation

npm install @exmg/exmg-collapsed

Example Usage

Standard

@property({type:  Boolean})
opened = false;

<exmg-button @click=${() => (this.opened = !this.opened)}>Open</exmg-button>

<exmg-collapsed  ?opened=${this.opened}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
</exmg-collapsed>

API

Slots

| Name | Description | | --------- | --------------------------------------------------------- | | default | Default content to display within the collapsible element |

Properties/Attributes

| Name | Type | Default | Description | | -------- | --------- | ------- | --------------------------------- | | opened | boolean | false | The opened state of the component |

Methods

| Name | Description | | -------- | ------------------------------------------------- | | toggle | Toggles the opened state of the component | | show | Sets the opened state of the component to true | | hide | Sets the opened state of the component to false |

Events

None

CSS Custom Properties

None

Additional references

• Additional Documentation

• Demo