Just add data-toggle="collapse"
and a data-target
to element to automatically assign control of a collapsible element. The data-target
attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse
to the collapsible element. If you'd like it to default open, add the additional class in
.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector"
. Refer to the demo to see this in action.
Enable manually with:
query(".collapse").collapse()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-parent=""
.
Name | type | default | description |
---|---|---|---|
parent | selector | false | If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) |
toggle | boolean | true | Toggles the collapsible element on invocation |
Activates your content as a collapsible element. Accepts an optional options object
.
query('#myCollapsible').collapse({ toggle: false })
Method | Description |
---|---|
hide | Hides a collapsible element. |
show | Shows a collapsible element. |
toggle | Toggles a collapsible element to shown or hidden. |
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Event | Description |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). |
hide | This event is fired immediately when the hide method has been called. |
hidden | This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). |
query('#myCollapsible').on('hidden', function () { // do something… }) |
Using the collapse plugin, we built a simple accordion style widget: