Collapse

The collapse component allows you to display a a detailed description. The description is hidden by default and can be displayed by clicking on a button. The button is not part of the component. It must be created by the user.

Usage

Collapse component can be used to display a detailed description. The description is hidden by default.

// create element
const collapse = document.createElement('monster-collapse');

// insert element into the DOM
document.getElementById('body').appendChild(collapse);

Details-Content

The content of the details is defined by the user. The content can be defined as a child element of the collapse component.

<monster-collapse>
    <p>I am the content of the overlay.</p>
</monster-collapse>

It is also possible to load the content from an external file. For this purpose, the reload component is used.

<monster-collapse>
    <monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-collapse>

Accordion

Combine multiple details into one Accordion.

<monster-collapse>
    <div>lorem ipsum dolor st amet, consteitur sadpselit, sed dam noum eiimocie naboeyminvit ut</div>
</monster-collapse>
<monster-collapse>
    <div>ineimad imnimevinam, qusi nostrud exerci tation ullacmorper susicpti lobrotis nsil uta lquiip</div>
</monster-collapse>

If you do not want to use the accordion, you can set the feature flag features.accordion to false.

Events

The following events are fired by the component.

• monster-collapse-before-open
• monster-collapse-open
• monster-collapse-before-close
• monster-collapse-closed

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.