SDS Accordion

Adds functionality for accordion.

Install

npm install @skills-development-scotland/sds-accordion --save

Usage

Syntax

SDSAccordion.accordion({
   selector: '.js-accordion',
   eventSelector: '.js-accordion__toggle',
   eventSelectorClasses: [
      'accordion__toggle'
   ],
   instanceIncrementOffset: 0
});

• selector (optional)

  • Type: string
  • Default: .js-accordion
  • The container css selector for the compelte accordion

• eventSelector (optional)

  • Type: string
  • Default: .js-accordion__toggle
  • The element css selector for the clickable element to expand/collapse
  • Must be child of container

• eventSelectorClasses (optional)

  • Type: string[]
  • Default: []
  • Styling classes to add to the event trigger (button)

• instanceIncrementOffset (optional)

  • Type: number
  • Default: 0
  • The starting id number for matching aria labelledby and controls

CSS

Application CSS required for the expand and collapse states.

is-collapsed for when the accordion content item is closed.

is-expanded for when the accordion content item is open.

Typescript

import { accordion } from '@skills-development-scotland/sds-accordion';

accordion({
  selector: '.js-accordion',
  eventSelector: '.js-accordion__toggle',
  eventSelectorClasses: ['accordion__toggle'],
  instanceIncrementOffset: 50,
});

Javascript

<script src="scripts/sds-accordion.js"></script>

SDSAccordion.accordion({
  selector: '.js-accordion',
});

Angular Component

import { Component, AfterViewInit } from '@angular/core';
import { accordion } from '@skills-development-scotland/sds-accordion';

@Component({
  selector: 'app-accordion',
  template: `
    <div *ngFor="let item of accordionItems" class="accordion js-accordion">
      <h2 class="accordion__title js-accordion__toggle">
        {{ item.title }}
      </h2>
      <div class="accordion__content">
        {{ item.description }}
      </div>
    </div>
  `,
})
export class AccordionComponent implements AfterViewInit {
  public accordionItems: any = [
    {
      title: 'One',
      description: 'One Description',
    },
    {
      title: 'Two',
      description: 'Two Description',
    },
  ];

  ngAfterViewInit(): void {
    accordion({
      selector: '.js-accordion',
      eventSelector: '.js-accordion__toggle',
      eventSelectorClasses: ['accordion__toggle'],
      instanceIncrementOffset: 50,
    });
  }
}