v-accordion

vAccordion - AngularJS multi-level accordion component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
v-accordion
310261.6.08 years ago9 years agoMinified + gzip package size for v-accordion in KB

Readme

AngularJS multi-level accordion
- Allows for a nested structure - Works with (or without) ng-repeat - Allows multiple sections to be open at once

Examples

- GitHub - CodePen - Linksfridge

Usage

- If you use bower or npm, just bower/npm install v-accordion. If not, download files from the github repo.
- Include angular.js, angular-animate.js, v-accordion.js, and v-accordion.css: ```html

```
- Add vAccordion and ngAnimate as dependencies to your application module: ```js angular.module('myApp', 'vAccordion', 'ngAnimate'); ```
- Put the following markup in your template: ```html
<!-- add expanded attribute to open the section -->
<v-pane expanded>
  <v-pane-header>
    Pane header #1
  </v-pane-header>

  <v-pane-content>
    Pane content #1
  </v-pane-content>
</v-pane>

<v-pane disabled>
  <v-pane-header>
    Pane header #2
  </v-pane-header>

  <v-pane-content>
    Pane content #2
  </v-pane-content>
</v-pane>
```
- You can also use v-accordion with ng-repeat: ```html
<v-pane ng-repeat="pane in panes" expanded="pane.isExpanded">
  <v-pane-header>
    {{ ::pane.header }}
  </v-pane-header>

  <v-pane-content>
    {{ ::pane.content }}

    <!-- accordions can be nested :) -->
    <v-accordion ng-if="pane.subpanes">
      <v-pane ng-repeat="subpane in pane.subpanes" ng-disabled="subpane.isDisabled">
        <v-pane-header>
          {{ ::subpane.header }}
        </v-pane-header>
        <v-pane-content>
          {{ ::subpane.content }}
        </v-pane-content>
      </v-pane>
    </v-accordion>
  </v-pane-content>
</v-pane>
```

API

Control

Add control attribute and use the following methods to control vAccordion from it's parent scope:
- toggle(indexOrId) - expand(indexOrId) - collapse(indexOrId) - expandAll() - collapseAll() - hasExpandedPane()
<v-accordion id="my-accordion" multiple control="accordion">

  <v-pane id="{{ pane.id }}" ng-repeat="pane in panes">
    <v-pane-header>
      {{ ::pane.header }}
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>

</v-accordion>

<button ng-click="accordion.toggle(0)">Toggle first pane</button>
<button ng-click="accordion.expandAll()">Expand all</button>
<button ng-click="accordion.collapseAll()">Collapse all</button>

$scope.$on('my-accordion:onReady', function () {
  var firstPane = $scope.panes[0];
  $scope.accordion.toggle(firstPane.id);
});

Scope

$accordion and $pane properties allows you to control the directive from it's transcluded scope.
$accordion
- toggle(indexOrId) - expand(indexOrId) - collapse(indexOrId) - expandAll() - collapseAll() - hasExpandedPane() - id
$pane
- toggle() - expand() - collapse() - isExpanded() - id
<v-accordion multiple>

  <v-pane ng-repeat="pane in panes">
    <!-- here's how you can create a custom toggle button -->
    <v-pane-header inactive>
      {{ ::pane.header }}
      <button ng-click="$pane.toggle()">Toggle me</button>
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>

  <button ng-click="$accordion.expandAll()">Expand all</button>

</v-accordion>

Events

The directive emits the following events:
- vAccordion:onReady or yourAccordionId:onReady - vAccordion:onExpand or yourAccordionId:onExpand - vAccordion:onExpandAnimationEnd or yourAccordionId:onExpandAnimationEnd - vAccordion:onCollapse or yourAccordionId:onCollapse - vAccordion:onCollapseAnimationEnd or yourAccordionId:onCollapseAnimationEnd

Callbacks

Use these callbacks to get the expanded/collapsed pane index and id:
<v-accordion onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)">

  <v-pane id="{{ ::pane.id }}" ng-repeat="pane in panes">
    <v-pane-header>
      {{ ::pane.header }}
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>

</v-accordion>

$scope.expandCallback = function (index, id) {
  console.log('expanded pane:', index, id);
};

$scope.collapseCallback = function (index, id) {
  console.log('collapsed pane:', index, id));
};

Configuration

Module

To change the default animation duration, inject accordionConfig provider in your app config:
angular
  .module('myApp', ['vAccordion'])
  .config(function (accordionConfig) {
    accordionConfig.expandAnimationDuration = 0.5;
  });

SCSS

If you are using SASS, you can import vAccordion.scss file and override the following variables:
$v-accordion-default-theme:         true !default;

$v-accordion-spacing:               20px !default;

$v-pane-border-color:               #D8D8D8 !default;
$v-pane-expanded-border-color:      #2196F3 !default;
$v-pane-icon-color:                 #2196F3 !default;
$v-pane-hover-color:                #2196F3 !default;

$v-pane-disabled-opacity:           0.6   !default;

$v-pane-expand-animation-duration:  0.5s  !default;
$v-pane-hover-animation-duration:   0.25s !default;

Accessibility

vAccordion manages keyboard focus and adds some common aria- attributes. BUT you should additionally place the aria-controls and aria-labelledby as follows:
<v-accordion>

  <v-pane ng-repeat="pane in panes">
    <v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-content">
      {{ ::pane.header }}
    </v-pane-header>

    <v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-header">
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>

</v-accordion>