Collapse
Toggle visibility of content sections. Great for accordions and expandable sections.
Basic Collapse
This content can be collapsed and expanded by clicking the button above.
<button data-ui-toggle="collapse" data-ui-target="#content">Toggle</button>
<div id="content" class="ui-collapse">
Hidden content here
</div>Initially Open
This content is visible by default (has
ui-collapse--show class).
Accordion Example
Content for section 1
Content for section 2
Content for section 3
Events
| Event | Description |
|---|---|
ui:collapse:show | Fired before showing (cancelable) |
ui:collapse:shown | Fired after shown |
ui:collapse:hide | Fired before hiding (cancelable) |
ui:collapse:hidden | Fired after hidden |