AngularJs directive that builds a vertical accodion menu from a JSON object, with an optional config scope for personalization. No jQuery dependency
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.

#sirAccordion for AngularJS

Dynamic, customizable and multilevel Accordion Menu for AngurlarJS. Builds up from a JSON object and an optional configuration object. You can download the project for a live demo in the example folder (don't forget to bower install dependencies) and for better understanding.

##sir Accordion Online Demo

    bower install sir-accordion


  • Dynamic content: if the scope that contains the JSON object is update the accordion updates too.

  • Responsive: The item height adjust to the content and is responsive; the width of the accodion adjusts to 100% of the wrapper tag.

  • Easy use AngularJS Directive: you just need to add the js and css files, add the 'sir-accordion' module to the AngularJS app and call the directive like this:

    //Code for the html directive
    <div sir-accordion collection="sirAccordion.collection" config="sirAccordion.config"></div>
    //Code for the Angular module
    .module('mainModule', ['sir-accordion'])
  • JSON object: the content of the accordion will be set by a JSON following the next structure where subCollection is an object of the same structure that will have more items to expand/collapse inside, topContent will be the content on top of that subCollection and botomContent will be after the subCollection items.

      //JSON object model
      $scope.collection = 
      [{"title":"Level 1 header","topContent":"","bottomContent":"","subCollection":[]}]; 
  • Customizable: you can customize by a config $scope like this:

    $scope.accordionConfig = {
        debug: false, //For developing
        animDur: 300, //Animations duration minvalue is 0
        expandFirst: false, //Auto expand first item
        autoCollapse: true, //Auto collapse item flag
        watchInternalChanges: false, //watch internal attrs of the collection (false if not needed)
        headerClass: '', //Adding extra class for the headers
        beforeHeader: '', //Adding code or text before all the headers inner content
        afterHeader: '', //Adding code or text after all the headers inner content
        topContentClass: '', //Adding extra class for topContent
        beforeTopContent: '', //Adding code or text before all the topContent if present on item
        afterTopContent: '', //Adding code or text after all the topContent if present on item
        bottomContentClass: '', //Adding extra class for topContent
        beforeBottomContent: '', //Adding code or text before all the topContent if present on item
        afterBottomContent: '' //Adding code or text before all the topContent if present on item
  • MultiLevel: the recursive algoritm allows to add as many levels to the accordion as you would like to.

  • VelocityJS: sirAccordion uses VelocityJS for the slide up and down animations.

  • ie8 Compatible: please kill ie8.

  • No jQuery dependency.

  • Bower installable package. To install from bower use bower install sir-accordion.

  • Events.

    • When the accordion is donde loading you can catch the event like this $scope.$on('sacDoneLoading', function ($event) {}).
    • When an element is expanded sacExpandStart and sacExpandEnd are emitted with the coordinates of the element.
    • When an element is collapsed sacCollapseStart and sacCollapseEnd are emitted with the coordinates of the element.
    • For expanding any content from your AngularJs App $scope.$broadcast('sacExpandContentById','1-1-3') where the second parameter is the content coordinates.
    • For collapsing any content from your AngularJs App $scope.$broadcast('sacCollapseContentById','1-1-3') where the second parameter is the content coordinates.
    • For collapsing all contents $scope.$broadcast('sacCollapseAll');
    • When autoCollapse is false you can trigger this event too $scope.$broadcast('sacExpandAll');.


  • AngularJS
  • VelocityJS

##Currently working on

  • Revision of the necessary config attrs
  • Config attrs validation
  • Maintining current state of the accordion when updating values of the data collection.

##Known issues

  • No option for mantaining current state of the accordion when updating the collection.



  • Minor fixes.


  • Velocity updated to 1.5.1.
  • Removed 1.3.0 breaking changes and I'll be removing the 1.3.0 tag entirely because it was not a good way of solving the issue I was trying to solve, this version solves the issue in a better way.
  • Minor fixes.

###V1.3.0 * Breaking changes * In order to remove the necessity of an isolated scope, this is the new way of declaring the directive <div sir-accordion collection="{{sirAccordion.collection}}" config="sirAccordion.config"></div>.

  • Now the scope is not isolated, making it easier to use and allowing to use ng-click and other interactions directly in the template.
  • Removed the default vertical aligment in .sir-accordion-header.


  • Fix automatically added ids not applying the way they should.


  • Classes automatically added for top and bottom content now will be ids.
  • Unique ids for top and bottom content will have the accordion element id if present.


  • Major Styles Improvement.
  • Unique classes for top and bottom contents added automatically


  • Style improvement.


  • New events sacExpandStart and sacExpandEnd, emitting every time a content expands.
  • New events sacCollapseStart and sacCollapseEnd, emitting every time a content collapses.


  • New sir-accordion-leaf class to sir-accordion-content if is a leaf element


  • Fixes issue when using multiple instances of sirAccordion


  • Fixed issue where animations jumped a little in Microsoft Edge


  • Updated sir-accordion.min.js
  • Fixed issue when using siraccordion on an app with jquery
  • Collapsed content no longer has display: none


  • Now with VelocityJS with faster and no buggy animations even on safari.
  • New event collapseById.
  • Code simplified (A LOT).
  • Bug fixes.
  • Autocollapse can be toggled on runtimes.
  • Improved expand and collapse single content and all contents algoritm.
  • AnimDur can be set as low as 0.
  • Suport for expandFirst.
  • Breaking changes
    • Changed some accordion config object attrs (see above).


  • Added optional attr 'data' for when you want access to a scope from a parent controller in a custom module inside the accordion directive (since the accordion directive has an isolated scope)


  • Code cleaning.
  • Now when the accordion finishes loading it emits sacDoneLoading event for better handling postloading code.
  • New event for expanding any content sacExpandContentById any given time (after sacDoneLoading event).
  • Bug fixes.
  • Code comments.
  • Breaking changes
    • Directive new name: sirAccordion (old was sirNgAccordion).
    • Event new name: sacCollapseAll (old was collapseAll).
    • Event new name: sacExpandAll (old was ExpandAll).