Lightweight accordion for AngularJS. It differs from other implementations in that it can be used with any markup as it does not enforce its own. If using Bootstrap, you may prefer UI Bootstrap which contains an accordion built specifically for it.
How to install
From your project root, run:
$ bower install https://github.com/rochdev/angular-lite-accordion.git
- No dependencies other than AngularJS
- Complete control over markup
- Support for custom animations
The component is broken up in 4 directives which are used as attributes on any element.
<ANY lite-accordion-group close-others=""> <ANY lite-accordion is-open="" is-disabled=""> <ANY lite-accordion-toggle="">...</ANY> <ANY lite-accordion-body>...</ANY> </ANY> </ANY>
liteAccordionGroup directive groups multiple
liteAccordion directives together.
||Controls whether only one accordion instance should be opened at the same time.|
liteAccordion directive represents a single accordion instance. It is the container for the body and any of its toggles.
||Controls whether the accordion body should be opened.|
||Controls whether toggles for this accordion should trigger.|
liteAccordionBody directive contains the actual content of the accordion.
liteAccordionToggle directive controls the
is-open attribute of its parent
||Can be either
The following animations are triggered on
addClass: .ng-hide - when the
isOpen attribute is set to a falsy value
removeClass: .ng-hide - when the
isOpen attribute is set to a truthy value
See the example folder for a complete example.