Collapse
Easy creating collapsible elements with special role.
About
Quite often you have to create elements that collapse at the user's request. For example, any collapsible panels.
In Metro 4 you can transform any element to collapsible. Element must have display: block css property.
To create collapse element you can add role data-role="collapse" and define toggle for it with attribute data-toggle-element="...".
In contrast to the dropdown, the collapsible elements can be a lot open at the same time.
In Metro 4 you can transform any element to collapsible.
<button class="button" id="collapse_toggle_1">Collapse block</button>
<div class="pos-relative">
<div class="bg-red fg-white"
data-role="collapse"
data-toggle-element="#collapse_toggle_1">
<p class="p-10 text-center">
In Metro 4 you can transform any element to collapsible.
</p>
</div>
</div>
By default, the collapsible element is open. If you need to create an element with collapsing state at start, add attribute data-collapsed="true".
In Metro 4 you can transform any element to collapsible.
<button class="button" id="collapse_toggle_2">Collapse block</button>
<div class="pos-relative">
<div class="bg-red fg-white" data-role="collapse"
data-toggle-element="#collapse_toggle_2" data-collapsed="true">
<p class="p-10 text-center">
In Metro 4 you can transform any element to collapsible.
</p>
</div>
</div>
Options
Each dropdown element has a number of option:
| Option | Data-* | Default | Desc |
|---|---|---|---|
| collapsed | data-collapsed |
false | Initial state for element. Values: true, false |
| effect | data-effect |
slide | Show/Close effect. Values: slide, fade |
| toggleElement | data-toggle-element |
null | Selector who specified toggle element |
| duration | data-duration |
300 | Effect duration in milliseconds |
| onExpand | data-on-drop |
Metro.noop | Event fired when element dropped |
| onCollapse | data-on-up |
Metro.noop | Event fired when element close |
| onCollapseCreate | data-on-dropdown-create |
Metro.noop | Event fired when element created |
Methods
Each collapse component has next methods: collapse(), expand(), isCollapsed(). You can use this methods to interact with component.
el = $('#el').data('collapse');
var collapsed = el.isCollapsed();
var f1 = collapsed === true ? "expand" : "collapse";
var f2 = collapsed === true ? "collapse" : "expand";
el[f1]();
setTimeout(function(){
el[f2]();
}, 2000);
You can change attribute data-collapsed at runtime to change element state.