Rivet collapsible
An accessible expand-and-collapse widget for Rivet
Default collapsible
The Rivet collapsible component is based on the HTML Details Element.
Collapsible panel
Accordion option
Nostrum fugit a natus. Corporis voluptates ut odio omnis nobis voluptas. Est dolor et eum quis deleniti explicabo autem est. Unde expedita ab quia maxime quia. Qui voluptas distinctio ipsa laborum laboriosam.
JavaScript API
The Rivet collapsible component comes with a couple of methods you can use to programmatically control the component. The .init() method
is called by default the first rivet-collapsible.js is loaded. An event listener is attached to the document that listens for clicks on buttons with the data-collapsible attribute. With that in mind you should be able to dynamically add collapsibles to the DOM without having the re-initialize the component.
| Method | Description |
|---|---|
Collapsible.init() |
Initializes the collapsible component. |
Collapsible.open(collapsibleButton, callback)
|
Opens the collapsible component. Accepts a collapsible toggle button element [data-collapsible] and an optional callback function that is run after the
collapsible is toggled opened. |
Collapsible.close(collapsibleButton, callback)
|
Closes the collapsible component. Accepts a collapsible toggle button element [data-collapsible] and an optional callback function that is run after the collapsible is toggled closed. |
Collapsible.destroy() |
Destroys the current initialization of the collapsible component and removes it's event listener. |