Opattern | Accordions

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... ")

    // Toggle text (ie: "Details")



    
        
            // Accordion heading (ie: "Time of use comparison")
        
        // The rest of your accordion contents

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

// 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`