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-more>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-more | bool | — | ✕ | For hide on collapse as more button |
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.
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.