Markdown docs
Collapse
This is Twig implementation of the Collapse component.
Basic example usage:
<Button data-spirit-toggle="collapse" data-spirit-target="collapse-example">Collapse trigger</Button>
<Collapse id="collapse-example">Collapse content</Collapse>Usage with link:
<ButtonLink href="javascript:void(0)" data-spirit-toggle="collapse" data-spirit-target="collapse-example">Collapse trigger</ButtonLink>Open on page load:
<Button data-spirit-toggle="collapse" data-spirit-target="collapse-example" aria-expanded="true">Collapse trigger</Button>
<Collapse id="collapse-example" isOpen>Collapse content</Collapse>Activate Collapse only on mobile screens:
<Button {# … #} UNSAFE_className="d-tablet-none">Collapse trigger</Button>
<Collapse breakpoint="tablet">Collapse content</Collapse>Hide Collapse trigger on collapse:
<Button {# … #} data-spirit-is-disposable>Collapse trigger</Button> {# … #}Without lexer:
{% embed "@spirit/collapse.twig" with { props: {
breakpoint: 'tablet',
id: 'collapse-example',
}} %}
{% block content %}
Collapse content
{% endblock %}
{% endembed %}You can add any custom trigger like <button> or <a> but it is necessary to add data-spirit-toggle="collapse", data-spirit-target="<id>" attributes to register trigger events.
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| breakpoint | string | null | ✕ | Breakpoint level [mobile,tablet,desktop] |
| elementType | string | div | ✕ | Custom element type for wrapper and content |
| id | string | — | ✓ | Collapse ID |
| isOpen | bool | false | ✕ | If true, make the item open on page load |
| parent | string | null | ✕ | A parent element selector that ensures that only one item is opened * |
(*) Attribute for Accordion implementation
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
Trigger Attributes
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| aria-controls | string | — | ✕ | Aria controls state (auto) |
| aria-expanded | string | — | ✕ | Aria expanded state (auto) |
| data-spirit-is-disposable | bool | — | ✕ | For hide on collapse as more trigger |
| data-spirit-more | bool | — | ✕ | DEPRECATED in favor of data-spirit-is-disposable; For hide on collapse as more trigger |
| data-spirit-target | string | — | ✓ | Target selector |
| data-spirit-toggle | string | collapse | ✓ | Iterable selector |
Other necessary attributes are toggled automatically, like aria-controls and aria-expanded when component is loaded or width of window is changed. There can be several triggers, the same rules apply to each.
⚠️ DEPRECATION NOTICE
Data attribute data-spirit-more is deprecated and will be removed in the next major release. Use data-spirit-is-disposable attribute instead.
JavaScript Plugin
For full functionality, you need to provide Spirit JavaScript:
<script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>Please consult the main README for how to include JavaScript plugins.
Or, feel free to write the controlling script yourself.
👉 Check the component's docs in the web package to see the full documentation and API of the plugin.