Collapse

Utility component that can be used to group or hide complex regions to keep the page clean.

Usage

Collapse

Example usage with button:


                                                
                                                <button type="button" role="button" data-spirit-toggle="collapse" data-spirit-target="collapse-example">trigger</button>
                                                <div id="collapse-example" class="Collapse">
                                                  <div class="Collapse__content">content</div>
                                                </div>

Usage with link:


                                                
                                                <a role="button" href="javascript:void(0)" data-spirit-toggle="collapse" data-spirit-target="collapse-example">
                                                  trigger
                                                </a>
                                                ...

Open on load example:


                                                
                                                <button ... aria-expanded="true">trigger</button>
                                                <div id="collapse-example" class="Collapse is-open">
                                                  <div class="Collapse__content">content</div>
                                                </div>

Responsive usage for tablet


                                                
                                                ...
                                                <button ... class="d-tablet-none">trigger</button>
                                                <div id="collapse-example" class="Collapse" data-spirit-breakpoint="tablet">
                                                  <div class="Collapse__content">...</div>
                                                </div>

Hide button when collapse


                                                
                                                <button ... data-spirit-more>trigger</button> ...

Trigger Attributes

Name	Type	Default	Required	Description
data-spirit-toggle	string	collapse	✓	Iterable selector
data-spirit-target	string	—	✓	Target selector
data-spirit-more	bool	—	✕	For hide on collapse as more button
aria-expanded	string	—	✕	Aria expanded state (auto)
aria-controls	string	—	✕	Aria controls state (auto)

Wrapper Attributes

Name	Type	Default	Required	Description
data-spirit-breakpoint	[tablet \| desktop]	—	✕	Breakpoint on which the collapsed content is forced to reveal *
data-spirit-parent	string	—	✕	A parent element selector that ensures that only one item is opened **

There can be several triggers, the same rules apply to each.

(*) The mobile breakpoint rule doesn't exist because it doesn't make sense given the implementation because it always stays hidden.

(**) Attribute for Accordion implementation

State Classes

The component provides auto toggle attributes and classes, like .is-open when triggered or initiated. It also provides .is-transitioning class switching during animation. This means that .Collapse.is-transitioning during opening and .Collapse.is-open.is-transitioning during closing.

JavaScript Plugin

For full functionality, you need to provide JavaScript which will handle toggling of the Collapse component.


                                                
                                                <script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>

JavaScript API

Methods

Method	Description
getInstance	Static method which allows you to get the collapse instance associated with a DOM element
getOrCreateInstance	Static method which allows you to get the collapse instance associated with a DOM element, or create a new one in case it wasn’t initialized.
hide	Hides collapse. Returns to the caller before the collapse has actually been hidden (i.e. before the hidden.collapse event occurs). This is considered a “manual” triggering of the collapse.
show	Reveals collapse. Returns to the caller before the collapse has actually been shown (i.e. before the shown.collapse event occurs). This is considered a “manual” triggering of the collapse. Tooltips with zero-length titles are never displayed.
toggle	Toggles collapse. Returns to the caller before the collapse has actually been shown or hidden (i.e. before the shown.collapse or hidden.collapse event occurs). This is considered a “manual” triggering of the collapse.


                                                
                                                const collapse = Collapse.getInstance('#example'); // Returns a collapse instance
                                                
                                                collapse.show();

Events

Method	Description
hide.collapse	This event is fired immediately when the hide instance method has been called.
hidden.collapse	This event is fired when the hide instance has finished being hidden from the user.
show.collapse	This event fires immediately when the show instance method is called.
shown.collapse	This event is fired when the show instance has finished being shown to the user.


                                                
                                                const myCollapseEl = document.getElementById('my-collapse');
                                                const collapse = Collapse.getOrCreateInstance(myCollapseEl);
                                                
                                                myCollapseEl.addEventListener('hidden.collapse', () => {
                                                  // do something...
                                                });
                                                
                                                collapse.hide();

Please consult main package README for how to include JavaScript plugins.

Or feel free to write controlling scripts yourself.