Collapse

This is Twig implementation of the Collapse component.

Basic example usage:

                                                
                                                <Button data-spirit-toggle="collapse" data-spirit-target="CollapseExample">Collapse trigger</Button>
                                                <Collapse id="CollapseExample">Collapse content</Collapse>

Usage with link:

                                                
                                                <ButtonLink href="javascript:void(0)" data-spirit-toggle="collapse" data-spirit-target="CollapseExample">Collapse trigger</ButtonLink>

Open on page load:

                                                
                                                <Button data-spirit-toggle="collapse" data-spirit-target="CollapseExample" aria-expanded="true">Collapse trigger</Button>
                                                <Collapse id="CollapseExample" 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.