AngularJS multi-level accordion

- Allows for a nested structure
- Works with (or without) ng-repeat
- Allows multiple sections to be open at once

Examples

- GitHub
- CodePen
- Linksfridge

Usage

- If you use bower or npm, just bower/npm install v-accordion. If not, download files from the github repo.

- Include angular.js, angular-animate.js, v-accordion.js, and v-accordion.css:
``html






`

- Add vAccordion and ngAnimate as dependencies to your application module:
`js
angular.module('myApp', ['vAccordion', 'ngAnimate']);
`

- Put the following markup in your template:
`html






Pane header #1



Pane content #1





Pane header #2



Pane content #2




`

- You can also use v-accordion with ng-repeat:
`html




{{ ::pane.header }}



{{ ::pane.content }}





{{ ::subpane.header }}


{{ ::subpane.content }}







`




API

#### Control

Add control attribute and use the following methods to control vAccordion from it's parent scope:

- toggle(indexOrId)
- expand(indexOrId)
- collapse(indexOrId)
- expandAll()
- collapseAll()
- hasExpandedPane()

`html




{{ ::pane.header }}



{{ ::pane.content }}



Toggle first pane
Expand all
Collapse all
`

`js
$scope.$on('my-accordion:onReady', function () {
var firstPane = $scope.panes[0];
$scope.accordion.toggle(firstPane.id);
});
`

#### Scope

$accordion and $pane properties allows you to control the directive from it's transcluded scope.

##### $accordion

- toggle(indexOrId)
- expand(indexOrId)
- collapse(indexOrId)
- expandAll()
- collapseAll()
- hasExpandedPane()
- id

##### $pane

- toggle()
- expand()
- collapse()
- isExpanded()
- id

`html





{{ ::pane.header }}
Toggle me



{{ ::pane.content }}



Expand all


`


#### Events

The directive emits the following events:

- vAccordion:onReady or yourAccordionId:onReady
- vAccordion:onExpand or yourAccordionId:onExpand
- vAccordion:onExpandAnimationEnd or yourAccordionId:onExpandAnimationEnd
- vAccordion:onCollapse or yourAccordionId:onCollapse
- vAccordion:onCollapseAnimationEnd or yourAccordionId:onCollapseAnimationEnd




Callbacks

Use these callbacks to get the expanded/collapsed pane index and id:

`html




{{ ::pane.header }}



{{ ::pane.content }}




`

`js
$scope.expandCallback = function (index, id) {
console.log('expanded pane:', index, id);
};

$scope.collapseCallback = function (index, id) {
console.log('collapsed pane:', index, id));
};
`




Configuration

#### Module
To change the default animation duration, inject accordionConfig provider in your app config:

`javascript
angular
.module('myApp', ['vAccordion'])
.config(function (accordionConfig) {
accordionConfig.expandAnimationDuration = 0.5;
});
`

#### SCSS
If you are using SASS, you can import vAccordion.scss file and override the following variables:

`scss
$v-accordion-default-theme: true !default;

$v-accordion-spacing: 20px !default;

$v-pane-border-color: #D8D8D8 !default;
$v-pane-expanded-border-color: #2196F3 !default;
$v-pane-icon-color: #2196F3 !default;
$v-pane-hover-color: #2196F3 !default;

$v-pane-disabled-opacity: 0.6 !default;

$v-pane-expand-animation-duration: 0.5s !default;
$v-pane-hover-animation-duration: 0.25s !default;
`




Accessibility


vAccordion manages keyboard focus and adds some common aria-* attributes. BUT you should additionally place the aria-controls and aria-labelledby as follows:

`html




{{ ::pane.header }}



{{ ::pane.content }}




``