basic-collapsible-panel

A panel which can be collapsed/expanded with an animated transition.

Usage no npm install needed!

<script type="module">
  import basicCollapsiblePanel from 'https://cdn.skypack.dev/basic-collapsible-panel';
</script>

README

API Documentation

CollapsiblePanel ⇐ ElementBase

A panel which can be expanded/collapsed with an animated transition.

This component combines the OpenClose mixin and a simple CSS height animation.

This component handles only the duties of collapsing and expanding. It does not provide a user interface for the user to trigger the change in state; you must provide that user interface yourself.

Kind: global class Extends: ElementBase
Mixes: OpenClose

collapsiblePanel.close()

Close the component.

This is equivalent to setting the closed property to true.

Kind: instance method of CollapsiblePanel. Defined by OpenClose mixin.

collapsiblePanel.closed : boolean

True if the component is curently closed.

Kind: instance property of CollapsiblePanel. Defined by OpenClose mixin. Default: false

collapsiblePanel.open()

Open the component.

This is equivalent to setting the closed property to false.

Kind: instance method of CollapsiblePanel. Defined by OpenClose mixin.

collapsiblePanel.render(closing)

Perform custom rendering of the close/open transition.

You can override this method to perform custom effects. If you do so, be sure to invoke super() in your implementation to get the baseline behavior.

Kind: instance method of CollapsiblePanel. Defined by OpenClose mixin.

Param Type Description
closing boolean True if the component is being closed, false if it's being opened.

collapsiblePanel.toggle()

Toggle the component's open/closed state.

Kind: instance method of CollapsiblePanel. Defined by OpenClose mixin.