## Collapse

Collapse is a custom animation to display and hide content

## All of your content

- That you wish
- to be able
- to collapse

At any time!

### Import

    import {{'{'}}Collapse{{'}'}} from 'fuel-ui';

    @Component({{'{'}}
        animations: [Collapse(300)]
    {{'}'}})

### Getting Started

Collapse allows you to toggle content on the page with a nice sliding animation. Import the Collapse function from 'fuel-ui', and add the function to your animations array of any component. You can optionally add a duration number as a parameter.

### Usage

<tabset>

    <div [@collapse]="collapsed ? 'true' : 'false'">
        <h2>All of your content</h2>
        <ul>
            <li>That you wish</li>
            <li>to be able</li>
            <li>to collapse</li>
        </ul>
        <p>At any time!</p>
    </div>

    export class CollapseExample {{'{'}}
        collapsed: boolean = false;
    {{'}'}}

</tabset>

### Parameters

Loading table...