fc-collapse

Provides a collapsable container

Usage

<script>
   import '@forter/collapse';
</script>

<fc-collapse>
<fc-button slot="toggle" \@click="${toggle}">Toggle</fc-button>
    <ul>
      <li>Vertically</li>
      <li>Collapsed</li>
      <li>Content</li>
    </ul>
</fc-collapse>

Properties

| Property | Attribute | Type | Default | Description | |--------------|--------------|---------------|---------|------------------------------------| | container | | HTMLElement | | The container element | | contents | | HTMLElement | | The contents element | | horizontal | horizontal | boolean | false | If the collapse opens horizontally | | opened | opened | void | | |

Slots

| Name | Description | |------|---------------------| | | collapsible content |

CSS Custom Properties

| Property | Description | |------------------------------------|--------------------------------------------------| | --fc-collapse-animation-timing | animation timing for the collapse. default: 0.3s | | --fc-collapse-container-overflow | container's overflow. default: hidden |