Example accordion
Using the collapse plugin, we built a simple accordion style widget:
- <div class="accordion" id="accordion2">
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
- Collapsible Group Item #1
- </a>
- </div>
- <div id="collapseOne" class="accordion-body collapse in">
- <div class="accordion-inner">
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
- Collapsible Group Item #2
- </a>
- </div>
- <div id="collapseTwo" class="accordion-body collapse">
- <div class="accordion-inner">
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- </div>
- ...
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
- <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
- simple collapsible
- </button>
- <div id="demo" class="collapse in"> … </div>
Usage
Via data attributes
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.
Via JavaScript
Enable manually with:
- $(".collapse").collapse()
Options
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 |
Methods
.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object
.
- $('#myCollapsible').collapse({
- toggle: false
- })
.collapse('toggle')
Toggles a collapsible element to shown or hidden.
.collapse('show')
Shows a collapsible element.
.collapse('hide')
Hides a collapsible element.
Events
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). |
- $('#myCollapsible').on('hidden', function () {
- // do something…
- })