Skip to content
Lightweight accordion directive for AngularJS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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


  • 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>

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.


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.

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.


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.


MIT License

You can’t perform that action at this time.