AngularJS multi-level accordion
- Allows for a nested structure
- Works with (or without)
ng-repeat
- Allows multiple sections to be open at once
Examples
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
, andv-accordion.css
:
- Add
vAccordion
andngAnimate
as dependencies to your application module:
angular;
- Put the following markup in your template:
<!-- add `multiple` attribute to allow multiple sections to open at once --> <!-- add expanded attribute to open the section --> Pane header #1 Pane content #1 Pane header #2 Pane content #2
- You can also use
v-accordion
withng-repeat
:
{{ ::pane.header }} {{ ::pane.content }} <!-- accordions can be nested :) --> {{ ::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()
{{ ::pane.header }} {{ ::pane.content }} Toggle first paneExpand allCollapse all
$scope;
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
<!-- here's how you can create a custom toggle button --> {{ ::pane.header }} Toggle me {{ ::pane.content }} Expand all
Events
The directive emits the following events:
vAccordion:onReady
oryourAccordionId:onReady
vAccordion:onExpand
oryourAccordionId:onExpand
vAccordion:onExpandAnimationEnd
oryourAccordionId:onExpandAnimationEnd
vAccordion:onCollapse
oryourAccordionId:onCollapse
vAccordion:onCollapseAnimationEnd
oryourAccordionId:onCollapseAnimationEnd
Callbacks
Use these callbacks to get the expanded/collapsed pane index and id:
{{ ::pane.header }} {{ ::pane.content }}
$scope { console;}; $scope { console;};
Configuration
Module
To change the default animation duration, inject accordionConfig
provider in your app config:
angular ;
SCSS
If you are using SASS, you can import vAccordion.scss file and override the following variables:
; ; ;;;; ; ;;
Accessibility
vAccordion manages keyboard focus and adds some common aria-* attributes. BUT you should additionally place the aria-controls
and aria-labelledby
as follows:
{{ ::pane.header }} {{ ::pane.content }}