Installation

Install the Accordion package from npm

npm install @royallondon/design-system-component-accordion

Import the required CSS file

@import '@royallondon/design-system-component-accordion/dist/accordion';

Import the required JS file and initialise the accordion function

import accordion from '@royallondon/design-system-component-accordion/dist/accordion';
const accordionContainers = document.querySelectorAll('.rl-c-accordion');
if (accordionContainers) {
  accordion(accordionContainers);
}

Start using the Accordion component

Support

Issues and questions are handled through the Royal London Design System support page.

Licence

@royallondon/design-system-component-accordion

This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.

Use of this package is subject to the Royal London Authorised Use Licence. See the LICENSE.md file included in this package.

The Accordion component for the Royal London Design System. For design guidance, examples and accessibility notes, see the Accordion page.

Release log

| Version | Release notes | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | 3.4.0 | Prepare for public npm release: add licence, publish dist only (src removed), remove source maps | | 3.3.3 | Move to new feed | | 3.3.0 | Apply new icons and latest tokens added to foundations package | | 3.2.2 | Add TypeScript declaration file | | 3.2.1 | Correct build output for accordion component | | 3.2.0 | Update accordion to use type tokens | | 3.1.0 | Update typography and sizing | | 3.0.0 | Remove obsolete ts file from dist to avoid import name conflict and fix readme content | | 2.1.0 | Updates to font sizing with header title and accordion title | | 2.0.0 | Upgrade for compatibility with foundations v2 | | 1.0.3 | Fixed TypeScript | | 1.0.2 | Fixed action focus state bottom border was sitting behind accordion | | 1.0.1 | Fixed incorrect focus state for accordion item action and hide accordion content so that links inside aren't tabable when content is hidden | | 1.0.0 | First release of component |