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 UI 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 UI 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 UI 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 UI 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 UI 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 = Metro.getPlugin('#el', '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.