# Collapses collapse.js

`mgcrea.ngStrap.collapse`

## Examples

Add quick, dynamic collapsable functionality to transition through panels of local content.

### Live demo clog.info

    $scope.panels = {{panels | json}};
    $scope.panels.activePanel = {{ panels.activePanel }};

#### {{ panel.title }}

{{ panel.body }}
Panel n°{{ $index + 1 }}
Add new panel

### Multiple open panels sample

By using the `allowMultiple` option, you can have multiple open panels at the same time. When using `allowMultiple` option, `ngModel` binds to an array with the open panel indexes.

    $scope.multiplePanels.activePanels = {{ multiplePanels.activePanels }};

#### {{ panel.title }}

{{ panel.body }}

## Usage

Append a `bs-collapse` attribute to any element and several `bs-collapse-toggle`,`bs-collapse-target` attributes to children elements to enable the directive.

#### Custom animations

Pane animation is done with the `active` class and requires custom CSS.

    .collapse.am-collapse {
      animation-duration: .3s;
      animation-timing-function: ease;
      animation-fill-mode: backwards;
      overflow: hidden;
      &.in-remove {
        animation-name: collapse;
        display: block;
      }
      &.in-add {
        animation-name: expand;
      }
    }

### Options

Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on `bs-collapse`. For data attributes, append the option name to `data-`, as in `data-animation=""`.

`bs-collapse-toggle` can be hard mapped to a `bs-collapse-target` by passing its target index to the attribute (`bs-collapse-toggle="1"`)

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation to the popover with `ngAnimate`
activeClass | string | in | Class to be applied to the animated element
disallowToggle | boolean | false | Prevents elements from being collapsed by clicking its toggle element, i.e., a panel can only be closed by opening another panel.
startCollapsed | boolean | false | Start with all elements collapsed
allowMultiple | boolean | false | Allow multiple open panels

#### Default options

You can override global defaults for the plugin with `$collapseProvider.defaults`

              angular.module('myApp')
              .config(function($collapseProvider) {
                angular.extend($collapseProvider.defaults, {
                  animation: 'am-flip-x'
                });
              })