Accordions

Accordions simplify an interface by progressively revealing information to the user.

Accordions can be used to contain and reveal additional content until the user requests it. They’re great for providing details that add to the overall experience.

Example

You spent less than your previous bill during peak times.
Details
Time of Use comparison
You are charged a different price for energy depending on the time of day. To save money, shift as much use as possible to Off-peak times.
{% toggleText('accordion') %}
// Insight (ie: "You spent less than... ")
<div op-accordion-toggle open="open">
    // Toggle text (ie: "Details")
</div>

<div class="accordion" ng-class="{ 'open' : open }">
    <div class="accordion-inner-wrapper">
        <div class="accordion-heading">
            // Accordion heading (ie: "Time of use comparison")
        </div>
        // The rest of your accordion contents
    </div>
</div>

When to use

Accordions rely on user interaction in order to be opened, so they aren’t appropriate for all types of content. These are some scenarios where you should and shouldn’t use accordions:

  • When space is limited
  • To simplify an interface
  • If modals, dialogs, or other overlay elements aren’t possible
  • When extra information is available, but isn’t essential
  • When the information they contain must be seen
  • If your layout isn’t flexible and the accordion can’t expand

Accordion toggle in AngularJS

The best way to get an accordion toggle on your project is to use the op-accordion-toggle directive from opattern-angular.

{% toggleText('op-accordion-toggle') %}
// Install opattern-angular
$ npm install opattern-angular
// In app.js ... inject op-accordion-toggle as a dependency.
angular.module('your-angular-app', [
    require('opattern-angular/directives/op-accordion-toggle').name,
    // ... more injected dependencies
]);

// In your controller or directive ... add open state to the scope.
app.controller('yourController', ['$scope', function ($scope) {
    $scope.accordionOpen = false;
}]);
// In your HTML
<div op-accordion-toggle open="accordionOpen"></div>
// In your CSS
@import '../node_modules/opattern-angular/directives/op-accordion-toggle/styles.scss';

SCSS reference

Variable Description Default
$accordion-max-height The accordion animates by transitioning the max height of .accordion from 0 to this value. Try to make this large enough that your language will fit at all breakpoints, but small enough that the accordion animates smoothly. 600px