Skip to content

Latest commit

 

History

History
90 lines (59 loc) · 2.99 KB

README.md

File metadata and controls

90 lines (59 loc) · 2.99 KB
Raw

angular-lite-accordion License

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

Features

  • No dependencies other than AngularJS
  • Complete control over markup
  • Support for custom animations

Usage

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 (optional)

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.

liteAccordion

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.

liteAccordionBody

The liteAccordionBody directive contains the actual content of the accordion.

liteAccordionToggle (optional)

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.

Animations

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

Example

See the example folder for a complete example.

License

MIT License