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 }}
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

Disallow double-click toggling behavior
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'
            });
          })