ui-accordion

simple accordion in angular js

Installing

Bower

    bower install ui-accordion
    <script src="bower_components/ui-accordion/dist/scripts/ui-accordion.js"></script>

CDN

You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.

Usage :

HTML

<ul ng-accordion>
  <li ng-accordion-group>
    <h3 ng-accordion-heading> Heading1</h3>
    <div ng-accordion-body> Body1</div>
  </li>
  <li ng-accordion-group options="options">
    <h3 ng-accordion-heading> Heading2</h3>
    <div ng-accordion-body> Body2</div>
  </li>
  <li ng-accordion-group>
    <h3 ng-accordion-heading> Heading3</h3>
    <div ng-accordion-body> Body3</div>
  </li>
<ul>
CODE
angular.module('myApp',['uiAccordion']);

HTML

<ul ng-accordion options="simpleAccordionOptions">
  <li ng-accordion-group options="accordionGroupOptions1">
    <h3 ng-accordion-heading> Heading1</h3>
    <div ng-accordion-body> Body1</div>
  </li>
  <li ng-accordion-group options="accordionGroupOptions2">
    <h3 ng-accordion-heading> Heading2</h3>
    <div ng-accordion-body> Body2</div>
  </li>
  <li ng-accordion-group options="accordionGroupOptions3">
    <h3 ng-accordion-heading> Heading3</h3>
    <div ng-accordion-body> Body3</div>
  </li>
<ul>
CODE
angular.module('myApp',['uiAccordion']);
angular.module('myApp').controller("myCtrl",function($scope){

      $scope.simpleAccordionOptions={
        closeOthers:false  //Default: true) - Control whether expanding an item will cause the other items to close.
      }
      $scope.accordionGroupOptions1={
        open:true          // (Default: false) - Whether accordion group is open or closed.
      }
      $scope.accordionGroupOptions2={
        open:false,
        disabled:true      //(Default: false) - Whether the accordion group is disabled or not.
      }
      $scope.accordionGroupOptions3={
        open:true
      }
});

HTML

<ul ng-accordion options="simpleAccordionOptions">
  <li ng-accordion-group options="accordionGroupOptions1">
    <h3 ng-accordion-heading> Heading1</h3>
    <div ng-accordion-body> Body1</div>
  </li>
  <li ng-accordion-group options="accordionGroupOptions2">
    <h3 ng-accordion-heading> Heading2</h3>
    <div ng-accordion-body> Body2</div>
  </li>
  <li ng-accordion-group options="accordionGroupOptions3">
    <h3 ng-accordion-heading> Heading3</h3>
    <div ng-accordion-body> Body3</div>
  </li>
<ul>
CODE
angular.module('myApp',['uiAccordion']);
angular.module('myApp').controller("myCtrl",function($scope){

      $scope.simpleAccordionOptions={
        closeOthers:false  //Default: true) - Control whether expanding an item will cause the other items to close.
      }
      $scope.accordionGroupOptions1={
        open:true          //(Default: false) - Whether accordion group is open or closed.
      }
      $scope.accordionGroupOptions2={
        open:false,
        disabled:true      //(Default: false) - Whether the accordion group is disabled or not.
      }
      $scope.accordionGroupOptions3={
        open:true,
        beforeOpen:function(){   //promise which is resolved before showing accordion body
            var def=$q.defer();
            // busy doing some stuff 
            def.resolve();
            return def.promise;
        },
        beforeHide:function(){  //promise which is resolved before hidding accordion body
         var def=$q.defer();
         // busy doing some stuff 
         def.resolve()
         return def.promise;
        }
      }
});

HTML

<ul ng-accordion>
  <li ng-accordion-group>
    <h3 ng-accordion-heading> Heading1</h3>
    <div ng-accordion-body>
        <h6>Nested Accordion</h6>
        <li ng-accordion-group>
          <h3 ng-accordion-heading> Heading11</h3>
          <div ng-accordion-body> Body11</div>
        </li>
        <li ng-accordion-group >
          <h3 ng-accordion-heading> Heading12</h3>
          <div ng-accordion-body> Body12</div>
        </li>
        <li ng-accordion-group >
          <h3 ng-accordion-heading> Heading13</h3>
          <div ng-accordion-body> Body13</div>
        </li>
    </div>
  </li>
  <li ng-accordion-group >
    <h3 ng-accordion-heading> Heading2</h3>
    <div ng-accordion-body> Body2</div>
  </li>
  <li ng-accordion-group >
    <h3 ng-accordion-heading> Heading3</h3>
    <div ng-accordion-body> Body3</div>
  </li>
<ul>

HTML

<div ng-controller="myCtrl">
    <div class="container">
        <h1 class="heading-primary">Animated Accordion</h1>
        <div class="accordion">
            <dl ng-accordion>
                <div ng-accordion-group options="accordionGroupOptions1">
                    <dt ng-accordion-heading>
                        <a class="accordion-title accordionTitle ">First Accordion heading</a>
                    </dt>
                    <dd class="accordion-content accordionItem is-collapsed" ng-accordion-body>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                        </dd>
                </div>
                <div ng-accordion-group options="accordionGroupOptions2">
                    <dt ng-accordion-heading>
                        <a class="accordion-title accordionTitle " >
                            Second Accordion heading</a>
                    </dt>
                    <dd class="accordion-content accordionItem is-collapsed" ng-accordion-body>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                        </dd>
                </div>
                <div ng-accordion-group options="accordionGroupOptions3">
                    <dt ng-accordion-heading>
                        <a class="accordion-title accordionTitle " >
                            Third Accordion heading
                        </a>
                    </dt>
                    <dd class="accordion-content accordionItem is-collapsed" ng-accordion-body>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                        </dd>
                </div>
            </dl>
        </div>
    </div>
</div>
CODE
angular.module('myApp', ['uiAccordion']);
angular.module('myApp').controller("myCtrl", function ($scope) {
    function animate(isOpen){
        var body=$(this.body),header=$(this.header);
        if(isOpen){
            header.find('a').addClass('is-collapsed');
            header.find('a').addClass('is-expanded');
            body.removeClass('is-collapsed');
            body.addClass('is-expanded');
            body.addClass('animateIn')
        }else{
            header.find('a').removeClass('is-collapsed');
            header.find('a').removeClass('is-expanded');
            body.addClass('is-collapsed');
            body.removeClass('is-expanded');
            body.removeClass('animateIn')
        }
    }
    $scope.accordionGroupOptions1 = {
        animateOpen:function(){
            // this here refers to AccordionGroup object which has header,body and options
            animate.call(this,true);
        },
        animateClose:function(){
            animate.call(this,false);
        }
    };
    $scope.accordionGroupOptions2 = {
        animateOpen:function(){
            animate.call(this,true);
        },
        animateClose:function(){
            animate.call(this,false);
        }
    };
    $scope.accordionGroupOptions3 = {
        animateOpen:function(){
            animate.call(this,true);
        },
        animateClose:function(){
            animate.call(this,false);
        }
    }
});