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.
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>The liteAccordionGroup directive groups multiple liteAccordion directives together.
Available options:
| Attribute | Type | Description |
|---|---|---|
| close-others | expression |
Controls whether only one accordion instance should be opened at the same time. |
The liteAccordion directive represents a single accordion instance. It is the container for the body and any of its toggles.
Available options:
| Attribute | Type | Description |
|---|---|---|
| is-open | expression |
Controls whether the accordion body should be opened. |
| is-disabled | expression |
Controls whether toggles for this accordion should trigger. |
The liteAccordionBody directive contains the actual content of the accordion.
The liteAccordionToggle directive controls the is-open attribute of its parent liteAccordion.
Available options:
| Attribute | Type | Description |
|---|---|---|
| liteAccordionBody | string |
Can be either open or close. Any other value or leaving it empty means to simply toggle between open and close. |
The following animations are triggered on liteAccordionBody:
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.