Material Admin Extended Dark

## Collapse

Flexible plugin that utilizes a handful of classes for easy toggle behavior.

This is a Bootstrap javascript component and you can find it's detailed documentation at: http://getbootstrap.com/javascript/#collapse

Live preview: `/components.html`

#### Basic example

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

    <!-- Collapse triggers -->
    <a class="btn btn-default" data-toggle="collapse" href="#collape-demo">
        Link with href
    </a>
    <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collape-demo">
        Button with data-target
    </button>

    <!-- Collapse content -->
    <div class="collapse" id="collape-demo">...</div>

#### Accordion example

Extend the default collapse behavior to create an accordion with the panel component.

    <div class="panel-group" id="accordion">
        <div class="panel panel-collapse">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapse-1" class="collapse in">
                <div class="panel-body">...</div>
            </div>
        </div>
        <div class="panel panel-collapse">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapse-2" class="collapse">
                <div class="panel-body">...</div>
            </div>
        </div>
        <div class="panel panel-collapse">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapse-3" class="collapse">
                <div class="panel-body">...</div>
            </div>
        </div>
    </div>

Source files:

- LESS: `/less/inc/bootstrao-overrides/panel.less`
- HTML: `/components.html`
- JS(collpase fix): `/js/inc/functions.js`