Collapse

Collapse is a flexible plugin that utilises a handful of classes for easy toggle behavior.

Material uses Bootstrap's collapse, please visit Bootstrap's documentation site for detailed usage.

Example

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

<a data-toggle="collapse" href="#selector"> ... </a>
<div class="collapse collapsible-region" id="selector"> ... </div>

Helper Classes

Helper classes .collapsed-hide and .collapsed-show can be used to change content of collapse's toggle depending on whether its target is collapsed or expanded.

Class	Collapsed	Expanded
`.collapsed-hide`	Hidden	Shown
`.collapsed-show`	Shown	Hidden

<a data-toggle="collapse" href="#selector">
    ...
    <span class="collapsed-hide"> show when expanded </span>
    <span class="collapsed-hide"> show when collapsed </span>
</a>